Front-end file uploading method and system

Abstract

The invention discloses a front-end file uploading method and system, belongs to the technical field of front-end development, and aims to solve the technical problem of how to improve the uploading efficiency of large files and ensure the stability and reliability in the file uploading process. Comprising the steps of storing metadata of a target file in data attributes of a Vue component; slicing the target file to obtain a plurality of pieces of slice data, packaging the slice data into a FormData object, and storing metadata of the slice data into data attributes of a Vue component; sequentially uploading the FormData objects to a back-end server, storing slice information of uploaded slice data to a front-end local, constructing and updating the uploading progress of a target file, and providing breakpoint resume for the slice data which is interrupted to be uploaded; and the back-end server stores the FormData object sent by the front end through the temporary file.

Description

Technical Field

[0001] The present invention relates to the technical field of front - end development, and more specifically, to a front - end file upload method and system. Background Art

[0002] In traditional file upload solutions, the upload efficiency of large files is low and the stability is poor. How to improve the upload efficiency of large files and ensure the stability and reliability during the file upload process is a technical problem that needs to be solved. Summary of the Invention

[0003] The technical task of the present invention is to address the above deficiencies and provide a front - end file upload method and system to solve the technical problem of how to improve the upload efficiency of large files and ensure the stability and reliability during the file upload process.

[0004] In a first aspect, a front - end file upload method of the present invention uploads a large front - end file to a back - end server based on file slicing and breakpoint resuming. The method includes the following steps:

[0005] File selection: Obtain the file selected by the user as the target file through a Vue component deployed on the front - end, and store the metadata of the target file in the data property of the Vue component;

[0006] File slicing: Slice the target file to obtain multiple slice data, encapsulate the slice data into a FormData object, and store the metadata of the slice data in the data property of the Vue component;

[0007] Slice upload: Sequentially upload the FormData object corresponding to each slice data to the back - end server. During the upload of the slice data, store the slice information of the uploaded slice data in the front - end local, construct and update the upload progress of the target file based on the slice information of the uploaded slice data, and provide breakpoint resuming for the interrupted slice data based on the slice information of the uploaded slice data;

[0008] Slice saving: During the slice upload, the back - end server stores the FormData object sent by the front - end through a temporary file. After all the FormData objects corresponding to the target file are sent to the temporary file of the back - end server, clear the slice data stored in the front - end local, as well as the metadata and slice information of each slice data.

[0009] Preferably, during file selection, listen for changes in the front - end file input box through the v - model directive or @change event of the Vue component, obtain the file selected by the user as the target file through the input tag, and store the metadata of the target file in the data property of the Vue component.

[0010] Preferably, the file slicing includes the following steps:

[0011] Use the File API of JavaScript to obtain a file object, and use the Blob.prototype.slice() method to cut the target file into multiple slice data;

[0012] Create a FormData object, encapsulate the slice data into the FormData object in the form of key-value pairs, and store the metadata of the slice data in the data attribute of the Vue component.

[0013] Preferably, when uploading slices, for the target file to be uploaded, based on the data attribute of the Vue component, determine whether there is uploaded slice information in the front-end local storage. If there is uploaded slice information in the front-end local storage, based on the slice information of the uploaded slice data, determine the slice data of the interrupted transmission. For the subsequent un-uploaded slice data corresponding to the target file, upload the FormData object corresponding to the un-uploaded slice data to the back-end server. If there is no uploaded slice information in the front-end local storage, upload the FormData object corresponding to each slice data to the back-end server in turn. Among them, during the slice data upload process, use AJAX or Fetch API to send the FormData object to the back-end server. Listen to the upload progress of the FormData object corresponding to the target file through the Vue component, use localStorage.getItem to obtain the slice information of the uploaded slice data from the front-end local and store the slice information of the uploaded slice data in localStorage or sessionStorage. Based on the slice information of the uploaded slice data, use the progress element of HTML5 to construct and update the upload progress of the target file. Among them, the slice information includes the slice index and the slice size.

[0014] In a second aspect, a front-end file upload system of the present invention is used to implement the front-end large file upload to the back-end server through a front-end file upload method according to any one of the first aspects. The system is applied between the front-end and the back-end server and includes a file selection module, a file slicing module, a slice upload module, and a slice saving module;

[0015] The file selection module is used to perform the following: obtain the file selected by the user as the target file through the Vue component deployed on the front-end, and store the metadata of the target file in the data attribute of the Vue component;

[0016] The file slicing module is used to perform the following: slice the target file to obtain multiple slice data, encapsulate the slice data into a FormData object, and store the metadata of the slice data in the data property of the Vue component;

[0017] The slice upload module is used to perform the following: sequentially upload the FormData object corresponding to each slice data to the backend server. During the slice data upload process, store the slice information of the uploaded slice data locally on the front end, construct and update the upload progress of the target file based on the slice information of the uploaded slice data, and provide resume from breakpoint for the slice data with interrupted upload based on the slice information of the uploaded slice data;

[0018] The slice saving module is used to perform the following: during the slice upload process, call the backend server to store the FormData object sent by the front end in a temporary file on the backend server through the temporary file on the backend server. After all FormData objects corresponding to the target file are sent to the temporary file on the backend server, clear the slice data stored locally on the front end, the metadata of each slice data, and the slice information.

[0019] Preferably, the file selection module is used to listen for changes in the front-end file input box through the v-model directive or @change event of the Vue component, obtain the file selected by the user as the target file through the input tag, and store the metadata of the target file in the data property of the Vue component.

[0020] Preferably, the file slicing module is used to perform the following operations:

[0021] Use the File API of JavaScript to obtain a file object, and use the Blob.prototype.slice() method to cut the target file into multiple slice data;

[0022] Create a FormData object, encapsulate the slice data into the FormData object in the form of key-value pairs, and store the metadata of the slice data in the data property of the Vue component.

[0023] Preferably, for the target file to be uploaded, the slice upload module is used to perform the following: Based on the data attribute of the Vue component, determine whether there is uploaded slice information in the front-end local storage. If there is uploaded slice information in the front-end local storage, based on the slice information of the uploaded slice data, determine the sliced data of the interrupted transmission. For the subsequent unsliced data corresponding to the target file, upload the FormData object corresponding to the unsliced data to the back-end server. If there is no uploaded slice information in the front-end local storage, upload the FormData object corresponding to each slice data to the back-end server in sequence. Among them, during the slice data upload process, use AJAX or the Fetch API to send the FormData object to the back-end server, listen to the upload progress of the FormData object corresponding to the target file through the Vue component, use localStorage.getItem to obtain the slice information of the uploaded slice data from the front-end local and store the slice information of the uploaded slice data in localStorage or sessionStorage, and based on the slice information of the uploaded slice data, use the progress element of HTML5 to construct and update the upload progress of the target file. Among them, the slice information includes the slice index and the slice size.

[0024] The front-end file upload method and system of the present invention have the following advantages:

[0025] 1. Improve upload efficiency: By cutting large files into small pieces for uploading, the characteristics of parallel upload can be fully utilized to improve the overall upload speed. At the same time, even in the case of poor network conditions, the file upload can be completed faster, thereby improving the user experience;

[0026] 2. Improve user experience: Real-time display of the upload progress allows users to clearly understand the progress of the file upload, increasing the user's sense of control and visual feedback for the upload operation. This timely feedback can reduce the user's anxiety and improve user satisfaction;

[0027] 3. Ensure upload stability and reliability: Through the function of resume from breakpoint, even in the case of network interruption or other abnormal situations, users can continue to upload at the interrupted point, avoiding the situation of the entire file upload failure. This can ensure the stability and reliability of the file upload and reduce repeated uploads caused by unexpected situations.

[0028] 4. Save bandwidth and server resources: Slice upload reduces the amount of data in a single request, which can effectively save the consumption of bandwidth and server resources. In addition, the resume from breakpoint function can also reduce unnecessary repeated uploads, further saving network and server resources;

[0029] 5. Improve development efficiency: By leveraging existing front-end technologies and tools such as the File API of JavaScript and the Vue framework, it is easier to implement slice uploading and resume interrupted upload functions. These existing tools and technologies provide convenient interfaces and methods, enabling developers to implement these functions more efficiently and thus enhancing the overall development efficiency. Brief Description of the Drawings

[0030] To more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0031] The present invention will be further described below in conjunction with the drawings.

[0032] Figure 1 It is a flowchart of the working process of a front-end file upload method for Embodiment 1;

[0033] Figure 2 It is a flowchart of resume interrupted upload for a front-end file upload method in Embodiment 1. Detailed Embodiments

[0034] The present invention will be further described below in conjunction with the drawings and specific embodiments, so that those skilled in the art can better understand the present invention and be able to implement it. However, the embodiments cited are not intended to limit the present invention. Without conflict, the embodiments of the present invention and the technical features in the embodiments can be combined with each other.

[0035] The embodiments of the present invention provide a front-end file upload method and system for solving the technical problem of how to improve the upload efficiency of large files and ensure the stability and reliability during the file upload process.

[0036] Embodiment 1:

[0037] A front-end file upload method of the present invention uploads a large front-end file to a back-end server based on file slicing and resume interrupted upload, including four steps: file selection, file slicing, slice upload, and slice saving.

[0038] Step S100 File Selection: Obtain the file selected by the user as the target file through a Vue component deployed on the front end, and store the metadata of the target file in the data attribute of the Vue component.

[0039] As a specific implementation of file selection, the change of the front-end file input box is monitored through the v-model directive or @change event of the Vue component. The file selected by the user is obtained through the input tag as the target file, and the metadata of the target file is stored in the data attribute of the Vue component.

[0040] In this embodiment, when processing file selection, in the Vue component, the file selected by the user is obtained through the input tag or other means, and the change of the file input box is monitored by using the v-model directive or @change event of Vue, so as to trigger the corresponding processing logic after the file is selected, and the selected file is saved to the data attribute of the Vue component for subsequent processing and uploading.

[0041] Step S200: File slicing: The target file is sliced to obtain multiple slice data, the slice data is encapsulated into a FormData object, and the metadata of the slice data is stored in the data attribute of the Vue component.

[0042] As a specific implementation of file slicing, this step includes the following operations:

[0043] (1) Use the File API of JavaScript to obtain the file object, and use the Blob.prototype.slice() method to cut the target file into multiple slice data;

[0044] (2) Create a FormData object, encapsulate the slice data into the FormData object in the form of key-value pairs, and store the metadata of the slice data in the data attribute of the Vue component.

[0045] In this embodiment, the File API of JavaScript is used to obtain the file object, and the Blob.prototype.slice() method is used to cut the file into multiple slices. Such splitting allows large files to be split into small data blocks for more efficient management and transmission of data during uploading.

[0046] Step S300: Slice uploading: The FormData object corresponding to each slice data is uploaded to the back-end server in sequence. During the upload of the slice data, the slice information of the uploaded slice data is stored locally on the front end. Based on the slice information of the uploaded slice data, the upload progress of the target file is constructed and updated, and based on the slice information of the uploaded slice data, breakpoint continuation is provided for the slice data with interrupted upload.

[0047] As a specific implementation of slice upload, for the target file to be uploaded, based on the data attribute of the Vue component, it is judged whether there is uploaded slice information in the front-end local storage. If there is uploaded slice information in the front-end local storage, the slice data of the interrupted transmission is judged based on the slice information of the uploaded slice data. For the subsequent non-uploaded slice data corresponding to the target file, the FormData object corresponding to the non-uploaded slice data is uploaded to the back-end server. If there is no uploaded slice information in the front-end local storage, the FormData object corresponding to each slice data is sequentially uploaded to the back-end server. Among them, during the slice data upload process, the FormData object is sent to the back-end server using AJAX or the Fetch API. The upload progress of the FormData object corresponding to the target file is monitored through the Vue component. The slice information of the uploaded slice data is obtained from the front-end local using localStorage.getItem, and the slice information of the uploaded slice data is stored in localStorage or sessionStorage. Based on the slice information of the uploaded slice data, the upload progress of the target file is constructed and updated using the progress element of HTML5. Among them, the slice information includes the slice index and the slice size.

[0048] In this embodiment, the FormData object is used to send the slice data to the server through AJAX or the Fetch API. The FormData object allows key-value pair data to be sent to the server, including file data. During the slice upload process, the upload progress information is obtained by listening to the upload progress event in the Vue component. According to the upload progress information, the progress bar or prompt is updated so that the user can understand the progress of the file upload. The progress bar display can be implemented using the progress element of HTML5.

[0049] The method to achieve breakpoint resumption in this embodiment is as follows:

[0050] (1) Use localStorage or sessionStorage to store the uploaded slice information: During the upload process, the uploaded slice information, including the uploaded slice index, slice size, etc., is saved to localStorage or sessionStorage. By storing this information, even if the upload process is interrupted, the user can continue from the interruption point when re-uploading without having to start uploading the entire file again.

[0051] (2) Check the local storage before each upload: Before each file upload, check whether there is uploaded slice information in the local storage. If there is, obtain the uploaded slice information from the local storage and determine where to continue the upload based on this information to achieve the function of breakpoint resumption.

[0052] Step S400 Slice Saving: During the slice uploading process, the backend server stores the FormData object sent by the frontend through a temporary file. After all FormData objects corresponding to the target file are sent to the temporary file of the backend server, the slice data stored locally on the frontend, as well as the metadata and slice information of each slice data, are cleared.

[0053] In this embodiment, the backend server receives the slices and saves them in temporary storage, waiting for subsequent merging. Usually, the backend server will create a temporary folder or database table to store these slices. Each slice can be marked and identified using a unique identifier.

[0054] In this embodiment, the specific solution for slice uploading is as follows:

[0055] (1) Saving the uploaded slice information: Create a data property of a Vue component to save the uploaded slice information, including the uploaded slice index, slice size, etc. Use localStorage.getItem to obtain the uploaded slice information from local storage when the component is created to maintain the persistence of the upload progress after page refresh or reload.

[0056] (2) Handling the file selection event: Create a method to handle the file selection event, save the selected file to the data property of the component, and trigger this method by listening to the change event of the file selection box. When handling the file selection, cut the file into multiple slices and store the slice information in the data property of the component;

[0057] (3) Sending slices to the server: Create a method to send slices to the server and handle the response result. In this method, it is necessary to traverse all slices and perform the upload operation. During the process of sending slices, update the uploaded slice information in a timely manner and save the updated information to local storage to maintain the persistence of the upload progress;

[0058] (4) Triggering the upload operation: Create a method to trigger the upload operation, and add breakpoint resuming logic in this method. This method can be triggered by the user clicking the upload button. During the upload process, check whether there is uploaded slice information in local storage. If it exists, continue the upload from the breakpoint;

[0059] (5) Clearing the slice information in local storage: After the upload is completed, it is necessary to clear the slice information in local storage to ensure that the temporary data in local storage is cleared after the upload is completed, so as not to be affected during the next upload.

[0060] The method of this embodiment has obvious advantages in the scenario of large file upload with the cooperation of front-end slicing upload and breakpoint resumption. It can improve the upload efficiency, enhance the user experience, ensure the stability and reliability of the upload, and also save bandwidth and server resources, meeting the requirements of the large file scenario. It has important significance in practical applications, especially in scenarios that require handling large file uploads.

[0061] Embodiment 2:

[0062] A front-end file upload system of the present invention is applied between the front-end and the back-end server, and includes a file selection module, a file slicing module, a sliced upload module, and a sliced save module.

[0063] The file selection module is used to perform the following: obtain the file selected by the user as the target file through the Vue component deployed on the front-end, and store the metadata of the target file in the data attribute of the Vue component.

[0064] As a specific implementation of the file selection module, this module listens for changes in the front-end file input box through the v-model directive or @change event of the Vue component, obtains the file selected by the user as the target file through the input tag, and stores the metadata of the target file in the data attribute of the Vue component.

[0065] When processing file selection in this embodiment, in the Vue component, obtain the file selected by the user through the input tag or other means, and use the v-model directive or @change event of Vue to listen for changes in the file input box, so as to trigger the corresponding processing logic after the file is selected, and save the selected file to the data attribute of the Vue component for subsequent processing and upload.

[0066] The file slicing module is used to perform the following: slice the target file to obtain multiple slice data, encapsulate the slice data into a FormData object, and store the metadata of the slice data in the data attribute of the Vue component.

[0067] As a specific implementation of the file slicing module, this module is used to perform the following operations:

[0068] (1) Use the File API of JavaScript to obtain the file object, and use the Blob.prototype.slice() method to cut the target file into multiple slice data;

[0069] (2) Create a FormData object, encapsulate the slice data into the FormData object in the form of key-value pairs, and store the metadata of the slice data in the data attribute of the Vue component.

[0070] In this embodiment, the File API of JavaScript is used to obtain a file object, and the Blob.prototype.slice() method is used to cut the file into multiple slices. Such splitting allows large files to be split into small data chunks for more efficient management and transmission of data during upload.

[0071] The slice upload module is used to perform the following: sequentially upload the FormData object corresponding to each slice of data to the backend server. During the upload of slice data, store the slice information of the uploaded slice data locally on the front end, construct and update the upload progress of the target file based on the slice information of the uploaded slice data, and provide resume upload for the slice data with interrupted upload based on the slice information of the uploaded slice data.

[0072] As a specific implementation of the slice upload module, for the target file to be uploaded, this module is used to determine whether there is uploaded slice information in the front-end local storage based on the data attribute of the Vue component. If there is uploaded slice information in the front-end local storage, determine the slice data with interrupted transmission based on the slice information of the uploaded slice data. For the subsequent unuploaded slice data corresponding to the target file, upload the FormData object corresponding to the unuploaded slice data to the backend server. If there is no uploaded slice information in the front-end local storage, sequentially upload the FormData object corresponding to each slice of data to the backend server. Among them, during the upload of slice data, use AJAX or the Fetch API to send the FormData object to the backend server, listen for the upload progress of the FormData object corresponding to the target file through the Vue component, use localStorage.getItem to obtain the slice information of the uploaded slice data from the front-end local and store the slice information of the uploaded slice data in localStorage or sessionStorage, and construct and update the upload progress of the target file using the progress element of HTML5 based on the slice information of the uploaded slice data. Among them, the slice information includes the slice index and the slice size.

[0073] In this embodiment, the FormData object is used to send the slice data to the server through AJAX or the Fetch API. The FormData object allows key-value pair data to be sent to the server, including file data. During the slice upload process, obtain the upload progress information by listening for the upload progress event in the Vue component, and update the progress bar or prompt according to the upload progress information so that the user can understand the progress of the file upload. The progress bar display can be implemented using the progress element of HTML5.

[0074] In this embodiment, this module is used to achieve breakpoint resumption in the following manner:

[0075] (1) Use localStorage or sessionStorage to store the uploaded slice information: During the upload process, save the uploaded slice information to localStorage or sessionStorage, including the uploaded slice index, slice size, etc. By storing this information, even if the upload process is interrupted, the user can continue from the interruption point when re-uploading without having to start uploading the entire file again.

[0076] (2) Check the local storage before each upload: Before uploading a file each time, check whether there is uploaded slice information in the local storage. If it exists, obtain the uploaded slice information from the local storage and determine where to continue the upload based on this information to achieve the function of breakpoint resumption.

[0077] The slice saving module is used to perform the following: During the slice upload process, call the backend server and store the FormData object sent by the front-end through the temporary file in the backend server. After all FormData objects corresponding to the target file are sent to the temporary file in the backend server, clear the slice data stored locally on the front-end, as well as the metadata and slice information of each slice data.

[0078] In this embodiment, the backend server receives the slices and saves them to the temporary storage, waiting for subsequent merging. Usually, the backend server will create a temporary folder or database table to store these slices. Each slice can be marked and identified using a unique identifier.

[0079] In this embodiment, the specific solution for slice upload is as follows:

[0080] (1) Save the uploaded slice information: Create a data property of a Vue component to save the uploaded slice information, including the uploaded slice index, slice size, etc. Use localStorage.getItem to obtain the uploaded slice information from the local storage when the component is created to maintain the persistence of the upload progress after page refresh or reloading.

[0081] (2) Process the file selection event: Create a method to process the file selection event, save the selected file to the data property of the component, and trigger this method by listening to the change event of the file selection box. When processing the file selection, cut the file into multiple slices and store the slice information in the data property of the component;

[0082] (3) Send slices to the server: Create a method to send slices to the server and handle the response results. In this method, it is necessary to iterate through all slices and perform upload operations. During the process of sending slices, update the information of the uploaded slices in a timely manner and save the updated information to local storage to maintain the continuity of the upload progress;

[0083] (4) Trigger the upload operation: Create a method to trigger the upload operation. Add resume upload logic in this method. This method can be triggered by the user clicking the upload button. During the upload process, check whether there is information of uploaded slices in local storage. If so, continue the upload from the breakpoint;

[0084] (5) Clear the slice information in local storage: After the upload is completed, it is necessary to clear the slice information in local storage to ensure that the temporary data in local storage is cleared after the upload is completed, so as not to be affected during the next upload.

[0085] The system of this embodiment can implement the method disclosed in Embodiment 1 to transfer large front-end files to the back-end server.

[0086] The above has introduced the front-end file upload method and system provided by the present invention in detail. Specific examples are used in this article to elaborate on the principle and implementation manner of the present invention. The description of the above embodiments is only used to help understand the method and its core idea of the present invention; at the same time, for those of ordinary skill in the art, according to the idea of the present invention, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to the present invention.

Claims

1. A front-end file uploading method, characterized in that: The method for uploading a large front-end file to a back-end server based on file slicing and breakpoint resume includes the following steps: File selection: The Vue component deployed on the front end obtains the file selected by the user as the target file, and stores the metadata of the target file in the data attribute of the Vue component; File slicing: Slice the target file to obtain multiple slice data, encapsulate the slice data into a FormData object, and store the metadata of the slice data in the data attribute of the Vue component; Slice upload: upload the FormData object corresponding to each slice data to the backend server in turn. During the slice data upload process, store the slice information of the uploaded slice data locally on the front end. Build and update the upload progress of the target file based on the slice information of the uploaded slice data. Provide breakpoint resuming for the interrupted slice data upload based on the slice information of the uploaded slice data. Slice saving: During the slice upload process, the backend server stores the FormData objects sent by the frontend through temporary files. After all FormData objects corresponding to the target file are sent to the temporary files of the backend server, the slice data stored locally on the frontend, the metadata of each slice data, and the slice information are cleared.

2. The front-end file uploading method according to claim 1, characterized in that: When selecting a file, the changes of the front-end file input box are monitored through the v-model directive or @change event of the Vue component, the file selected by the user is obtained as the target file through the input tag, and the metadata of the target file is stored in the data attribute of the Vue component.

3. The front-end file uploading method according to claim 1, characterized in that: File slicing includes the following steps: Use JavaScript's File API to get the file object, and use the Blob.prototype.slice() method to cut the target file into multiple slices of data; Create a FormData object, encapsulate the slice data in the form of key-value pairs into the FormData object, and store the metadata of the slice data in the data attribute of the Vue component.

4. The front-end file uploading method according to claim 1, characterized in that: When uploading slices, for the target file to be uploaded, based on the data attribute of the Vue component, it is determined whether there is uploaded slice information in the front-end local storage. If there is uploaded slice information in the front-end local storage, the slice data to be interrupted is determined based on the slice information of the uploaded slice data. For the subsequent slice data corresponding to the target file that has not been uploaded, the FormData object corresponding to the unuploaded slice data is uploaded to the back-end server. If there is no uploaded slice information in the front-end local storage, the FormData object corresponding to each slice data is uploaded to the back-end server in turn. During the slice data upload process, the FormData object is sent to the back-end server using AJAX or Fetch API, the upload progress of the FormData object corresponding to the target file is monitored through the Vue component, the slice information of the uploaded slice data is obtained from the front-end local using localStorage.getItem, and the slice information of the uploaded slice data is stored in localStorage or sessionStorage. Based on the slice information of the uploaded slice data, the upload progress of the target file is constructed and updated using the progress element of HTML5, wherein the slice information includes the slice index and the slice size.

5. A front-end file upload system, characterized in that: The system is used to upload a large front-end file to a back-end server through a front-end file uploading method as described in any one of claims 1 to 4, wherein the system is applied between the front-end and back-end servers and includes a file selection module, a file slicing module, a slicing uploading module, and a slicing saving module; The file selection module is used to perform the following: obtain the file selected by the user as the target file through the Vue component deployed on the front end, and store the metadata of the target file in the data attribute of the Vue component; The file slicing module is used to perform the following: slice the target file to obtain multiple slice data, encapsulate the slice data into a FormData object, and store the metadata of the slice data in the data attribute of the Vue component; The slice upload module is used to perform the following: upload the FormData object corresponding to each slice data to the backend server in turn. During the slice data upload process, the slice information of the uploaded slice data is stored locally on the front end. Based on the slice information of the uploaded slice data, the upload progress of the target file is constructed and updated. Based on the slice information of the uploaded slice data, breakpoint resuming is provided for the interrupted uploaded slice data; The slice saving module is used to perform the following: during the slice upload process, the backend server is called, and the FormData object sent by the front end is stored in the temporary file in the backend server. After all FormData objects corresponding to the target file are sent to the temporary file of the backend server, the slice data stored locally on the front end and the metadata of each slice data and the slice information are cleared.

6. The front-end file upload system according to claim 5, characterized in that: The file selection module is used to monitor changes in the front-end file input box through the v-model directive or @change event of the Vue component, obtain the file selected by the user as the target file through the input tag, and store the metadata of the target file in the data attribute of the Vue component.

7. The front-end file upload system according to claim 5, characterized in that: The file slicing module is used to perform the following operations: Use JavaScript's File API to get the file object, and use the Blob.prototype.slice() method to cut the target file into multiple slices of data; Create a FormData object, encapsulate the slice data in the form of key-value pairs into the FormData object, and store the metadata of the slice data in the data attribute of the Vue component.

8. The front-end file upload system according to claim 5, characterized in that: For the target file to be uploaded, the slice upload module is used to perform the following: based on the data attribute of the Vue component, determine whether there is uploaded slice information in the front-end local storage; if there is uploaded slice information in the front-end local storage, determine the slice data to be interrupted based on the slice information of the uploaded slice data; for the subsequent slice data corresponding to the target file that has not been uploaded, upload the FormData object corresponding to the unuploaded slice data to the back-end server; if there is no uploaded slice information in the front-end local storage, upload the FormData object corresponding to each slice data to the back-end server in turn; during the slice data upload process, use AJAX or Fetch API to send the FormData object to the back-end server, monitor the upload progress of the FormData object corresponding to the target file through the Vue component, use localStorage.getItem to obtain the slice information of the uploaded slice data from the front-end local, and store the slice information of the uploaded slice data in localStorage or sessionStorage; based on the slice information of the uploaded slice data, use the progress element of HTML5 to build and update the upload progress of the target file, wherein the slice information includes the slice index and the slice size.

Images