File uploading component packaging method and device based on vue

Abstract

The invention relates to the technical field of VUE front ends, and particularly discloses a vue-based file uploading component packaging method and device, and the method comprises the steps: introducing an el-upload component, and creating a user-defined uploading method; an el-process component is introduced, and a progress numerical value is bound and uploaded; the size of an uploaded file is limited in a user-defined method; creating a fromdata object to store an uploaded file; acquiring an uploading progress, and performing parameter transmission; and determining a transmission path of the parameters, and carrying out component packaging. According to the method provided by the invention, a new component is formed by adding the el-process component to the el-upload component for secondary packaging, and the component can be repeatedly used at multiple positions, so that the problem that the file uploading function development step is tedious and complex in the business is solved, the development time and efficiency are saved, the code redundancy is avoided, and the later maintenance cost of the file uploading function is greatly reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of VUE front - end, and particularly relates to a method and device for encapsulating a file upload component based on vue. Background Art

[0002] With the development of the Internet, file upload has become one of the essential functions in many websites and applications. Currently, most file upload functions use the traditional form submission method, which is rather cumbersome and not convenient for development.

[0003] In the prior art, when performing file upload, a fromdata object is created at the front - end, the file to be uploaded is saved in the fromdata object, and then the size and type of the uploaded file are restricted. Finally, it is uploaded to the server and the onprogress of the XMLHttpRequest object is listened to display the progress.

[0004] As a front - end framework for component - based development, vue is becoming more and more popular among front - end developers. Component - based development brings good code reuse, greatly reducing the amount of code developed. In business requirements, various third - party components for file upload functions often do not meet the requirements, and a custom upload form is needed to meet business needs.

[0005] Based on this technical background, the present invention studies a method and device for encapsulating a file upload component based on vue. Summary of the Invention

[0006] Aiming at the deficiencies of the prior art, the present invention provides a method and device for encapsulating a file upload component based on vue. This method forms a new component by secondary encapsulation of the el - upload component with the el - progress component. This component can be reused at multiple positions, solving the problems of cumbersome and complex development steps for the file upload function in business, saving development time and efficiency, avoiding code redundancy, greatly reducing the later maintenance cost of the file upload function, and significantly reducing the difficulty of secondary development of the file upload function.

[0007] To achieve the above object, the first aspect of the present invention provides a method for encapsulating a file upload component based on vue, including:

[0008] Introduce the el - upload component and create a custom upload method;

[0009] Introduce the el - progress component and bind the upload progress value;

[0010] Limit the size of the uploaded file in the custom method;

[0011] Create a FormData object to store the uploaded file;

[0012] Obtain the upload progress and perform parameter transfer;

[0013] Determine the parameter transfer path and perform component encapsulation.

[0014] The second aspect of the present invention provides an encapsulation device for a file upload component based on Vue, including:

[0015] An el-upload component creation module for introducing the el-upload component and creating a custom upload method;

[0016] An el-progress component creation module for introducing the el-progress component and binding the upload progress value;

[0017] A file size limit module for limiting the size of the uploaded file in the custom method;

[0018] A file storage module for creating a FormData object to store the uploaded file;

[0019] An upload module for obtaining the upload progress and performing parameter transfer;

[0020] A component encapsulation module for determining the parameter transfer path and performing component encapsulation.

[0021] The third aspect of the present invention provides an electronic device, where the electronic device includes:

[0022] A memory storing executable instructions;

[0023] A processor that runs the executable instructions in the memory to implement the encapsulation method of the Vue-based file upload component described in the first aspect.

[0024] The fourth aspect of the present invention provides a computer-readable storage medium, which stores a computer program that, when executed by a processor, implements the encapsulation method of the Vue-based file upload component described in the first aspect.

[0025] The beneficial effects of the present invention include:

[0026] (1) The encapsulation method of the file upload component based on Vue proposed by the present invention forms a new component by secondary encapsulation of the el-upload component with the el-progress component. This component can be reused at multiple positions, solving the problems of cumbersome and complex development steps for the file upload function in business, saving development time and efficiency, avoiding redundant code, greatly reducing the later maintenance cost of the file upload function, and significantly reducing the difficulty of secondary development of the file upload function.

[0027] (2) The encapsulation method of the file upload component based on Vue proposed by the present invention performs secondary encapsulation of the el-upload component with the el-progress component to form a component, shortening the development steps, meeting the business requirements, improving user satisfaction, and solving the problems of cumbersome and complex development steps for the file upload function.

[0028] Other features and advantages of the present invention will be described in detail in the following specific implementation part. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] By describing the exemplary embodiments of the present invention in more detail in conjunction with the drawings, the above and other objects, features, and advantages of the present invention will become more apparent.

[0030] Figure 1 It is a flowchart of the encapsulation method of the file upload component based on Vue proposed by the present invention.

[0031] Figure 2 It is a flowchart of a specific implementation of the encapsulation method of the file upload component based on Vue proposed by the present invention.

[0032] Figure 3 It is a schematic diagram of the software interface in a specific implementation of the encapsulation method of the file upload component based on Vue proposed by the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0033] The following will describe the preferred embodiments of the present invention in more detail. Although the following describes the preferred embodiments of the present invention, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein.

[0034] The present invention provides an encapsulation method of a file upload component based on Vue, as Figure 1 shown, including:

[0035] Introduce the el-upload component and create a custom upload method;

[0036] Introduce the el-progress component and bind the upload progress value;

[0037] Limit the size of the uploaded file in the custom method;

[0038] Create a fromdata object to store the uploaded file;

[0039] Obtain the upload progress and perform parameter passing;

[0040] Determine the parameter passing path and perform component encapsulation.

[0041] In the present invention, by secondary encapsulation of the el-upload component with the el-progress component, a new component is formed. This component can be reused at multiple locations, solving the problem that the development steps of the file upload function in the business are cumbersome and complex, saving development time and efficiency, avoiding code redundancy, greatly reducing the later maintenance cost of the file upload function, and significantly reducing the difficulty of secondary development of the file upload function.

[0042] According to the present invention, introducing the el-upload component and creating a custom upload method includes:

[0043] In the vue page, introduce the el-upload component and create a custom upload method in the :http-request: attribute of the el-upload component.

[0044] According to the present invention, introducing the el-progress component and binding the upload progress value includes:

[0045] In the vue page, introduce the el-progress component and bind the variable representing the upload progress value under the :percentage attribute of the el-progress component;

[0046] Modify the progress bar style of the upload progress value using scss.

[0047] According to the present invention, limiting the size of the uploaded file in the custom method includes:

[0048] In the custom method, judge the size of the uploaded file according to the param.file.size attribute of the parameter;

[0049] Judge whether the selected uploaded file meets the upload standard according to the agreed size of the uploaded file between the front end and the back end.

[0050] According to the present invention, creating a fromdata object to store the uploaded file includes:

[0051] After converting the uploaded file into a binary large object using the NewBlob method, use the append method to store the large object in the fromdata object.

[0052] Preferably, obtaining the upload progress and performing parameter passing includes:

[0053] Define the progressEvent method to obtain the upload progress, recalculate the upload progress into a percentage, and pass the defined progressEvent method and the fromdata object as parameters to the encapsulated axios method.

[0054] Preferably, determining the parameter passing path and performing component encapsulation includes:

[0055] Determine the passing paths of each parameter, bind each parameter, and encapsulate the el-upload component and the el-progress component.

[0056] In the present invention, the el-upload component and the el-progress component are used for secondary encapsulation to form a component, which shortens the development steps, meets the business requirements, improves user satisfaction, and solves the problems of cumbersome and complex development steps for the file upload function.

[0057] The present invention will be described in more detail below through embodiments.

[0058] Embodiment 1:

[0059] As Figure 2 shown, this embodiment provides a method for encapsulating a file upload component based on vue, and the specific steps are as follows:

[0060] 1) Create an el-upload component:

[0061] In the vue page, introduce the el-upload component, and create a custom upload method in the :http-request: attribute of the el-upload component;

[0062] 2) Create an el-progress component:

[0063] In the vue page, introduce the el-progress component. Bind the variable representing the progress value under the :percentage attribute of the el-progress component. Use scss to modify the progress bar style;

[0064] 3) Limit the file size:

[0065] In the defined method, judge the specific size of the uploaded file according to the param.file.size attribute of the parameter. Judge whether the selected uploaded file meets the upload standard according to the agreed size of the uploaded file between the front end and the back end;

[0066] 4) Define upload parameters:

[0067] Create a fromdata object to store the files selected by the user. Use the NewBlob method to convert the data of the files selected by the user into a binary large object, and then use the append method to store the processed files into the fromdata object.

[0068] 5) Obtain the upload progress:

[0069] Define the progressEvent method to obtain the upload progress, and recalculate the obtained progress into a percentage. Pass the defined method and the fromdata object as parameters to the encapsulated axios method.

[0070] 6) Package into a component:

[0071] Handle the parameter passing, bind all parameters well, export the vue component, and realize the reuse of components in multiple positions.

[0072] Figure 3 This is the software interface schematic diagram of the method of the present invention. The el-upload component and the el-progress component are used for secondary encapsulation into a component, which shortens the development steps, meets the business requirements at the same time, and improves user satisfaction.

[0073] Example 2:

[0074] This embodiment provides a method for encapsulating a file upload component based on vue, as Figure 1 shown, including:

[0075] Introduce the el-upload component and create a custom upload method;

[0076] Introduce the el-progress component and bind the upload progress value;

[0077] Limit the size of the uploaded file in the custom method;

[0078] Create a fromdata object to store the uploaded file;

[0079] Obtain the upload progress and perform parameter passing;

[0080] Determine the parameter passing path and perform component encapsulation;

[0081] Introducing the el-upload component and creating a custom upload method includes:

[0082] In the vue page, introduce the el-upload component and create a custom upload method in the :http-request: attribute of the el-upload component;

[0083] Introduce the el-progress component and bind the upload progress value, including:

[0084] In the vue page, introduce the el-progress component and bind the variable representing the upload progress value under the :percentage attribute of the el-progress component;

[0085] Modify the progress bar style of the upload progress value using scss;

[0086] Limit the size of the uploaded file in the custom method, including:

[0087] In the custom method, judge the size of the uploaded file according to the param.file.size attribute of the parameter;

[0088] Judge whether the selected uploaded file meets the upload standard according to the agreed size of the uploaded file between the front end and the back end;

[0089] Create a fromdata object to store the uploaded file, including:

[0090] After converting the uploaded file into a binary large object using the NewBlob method, use the append method to store the large object in the fromdata object;

[0091] Obtain the upload progress and perform parameter passing, including:

[0092] Define the progressEvent method to obtain the upload progress, recalculate the upload progress into a percentage, and pass the defined progressEvent method and the fromdata object as parameters to the encapsulated axios method;

[0093] Determine the parameter passing path and perform component encapsulation, including:

[0094] Determine the passing paths of each parameter, bind each parameter, and encapsulate the el-upload component and the el-progress component.

[0095] Example 3:

[0096] This embodiment provides a device for encapsulating a file upload component based on vue, including:

[0097] The el-upload component creation module is used to introduce the el-upload component and create a custom upload method;

[0098] The el-progress component creation module is used to introduce the el-progress component and bind the upload progress value;

[0099] The file size limit module is used to limit the size of the uploaded file in the custom method;

[0100] The file storage module is used to create a fromdata object to store the uploaded file;

[0101] The upload module is used to obtain the upload progress and perform parameter transfer;

[0102] The component encapsulation module is used to determine the parameter transfer path and perform component encapsulation;

[0103] Introducing the el-upload component and creating a custom upload method includes:

[0104] In the vue page, introduce the el-upload component and create a custom upload method in the :http-request: attribute of the el-upload component;

[0105] Introducing the el-progress component and binding the upload progress value includes:

[0106] In the vue page, introduce the el-progress component and bind the variable representing the upload progress value under the :percentage attribute of the el-progress component;

[0107] The progress bar style of the upload progress value is modified using scss;

[0108] Limiting the size of the uploaded file in the custom method includes:

[0109] In the custom method, judge the size of the uploaded file according to the param.file.size attribute of the parameter;

[0110] Judge whether the selected uploaded file meets the upload standard according to the agreed size of the uploaded file between the front end and the back end;

[0111] Creating a fromdata object to store the uploaded file includes:

[0112] After converting the uploaded file into a binary large object using the NewBlob method, use the append method to store the large object in the fromdata object;

[0113] Obtain the upload progress and perform parameter passing, including:

[0114] Define the progressEvent method to obtain the upload progress, recalculate the upload progress into a percentage, and pass the defined progressEvent method and the fromdata object as parameters to the encapsulated axios method;

[0115] Determine the parameter passing path and perform component encapsulation, including:

[0116] Determine the passing paths of each parameter, bind each parameter, and encapsulate the el-upload component and the el-progress component.

[0117] Example 4:

[0118] An embodiment of the present invention provides an electronic device including a memory and a processor,

[0119] The memory stores executable instructions;

[0120] The processor runs the executable instructions in the memory to implement the encapsulation method of the file upload component based on vue.

[0121] This memory is used to store non-temporary computer-readable instructions. Specifically, the memory may include one or more computer program products, and the computer program products may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory, etc. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc.

[0122] The processor may be a central processing unit (CPU) or other forms of processing units with data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions. In an embodiment of the present invention, the processor is used to run the computer-readable instructions stored in the memory.

[0123] Those skilled in the art should understand that, in order to solve the technical problem of how to obtain a good user experience effect, this embodiment may also include well-known structures such as communication buses and interfaces, and these well-known structures should also be included in the protection scope of the present invention.

[0124] For the detailed description of this embodiment, reference may be made to the corresponding descriptions in the foregoing embodiments, and details will not be repeated here.

[0125] Example 5:

[0126] An embodiment of the present invention provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it implements a method for encapsulating a file upload component based on vue.

[0127] According to the computer-readable storage medium of the embodiments of the present invention, non-temporary computer-readable instructions are stored thereon. When the non-temporary computer-readable instructions are run by a processor, all or part of the steps of the methods of the various embodiments of the present invention described above are executed.

[0128] The above computer-readable storage medium includes but is not limited to: optical storage media (such as CD-ROMs and DVDs), magneto-optical storage media (such as MOs), magnetic storage media (such as magnetic tapes or external hard drives), media with built-in rewritable non-volatile memories (such as memory cards), and media with built-in ROMs (such as ROM cartridges).

[0129] The method for encapsulating a file upload component based on vue proposed by the embodiments of the present invention forms a new component by secondarily encapsulating the el-upload component with the el-progress component. This component can be reused at multiple locations, solving the problem of the cumbersome and complex development steps for the file upload function in business, saving development time and efficiency, avoiding code redundancy, greatly reducing the later maintenance cost of the file upload function, and significantly reducing the difficulty of secondary development of the file upload function.

[0130] The various embodiments of the present invention have been described above. The above description is exemplary and not exhaustive, and is also not limited to the disclosed embodiments. Many modifications and variations are obvious to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments.

Claims

1. A method for encapsulating a file upload component based on vue, characterized in that, It includes: Introduce the el-upload component and create a custom upload method; Introduce the el-progress component and bind the upload progress value; Limit the size of the uploaded file in the custom method; Create a fromdata object to store the uploaded file; Obtain the upload progress and perform parameter passing; Determine the parameter passing path and perform component encapsulation.

2. The method according to claim 1, characterized in that, Introducing the el-upload component and creating a custom upload method includes: In the vue page, introduce the el-upload component and create a custom upload method in the :http-request: attribute of the el-upload component.

3. The method according to claim 1, wherein Introducing the el-progress component and binding the upload progress value includes: In the vue page, introduce the el-progress component and bind the variable representing the upload progress value under the :percentage attribute of the el-progress component; The progress bar style of the upload progress value is modified using scss.

4. The method according to claim 2, wherein Limiting the size of the uploaded file in the custom method includes: In the custom method, judge the size of the uploaded file according to the param.file.size attribute of the parameter; Judge whether the selected uploaded file meets the upload standard according to the agreed size of the uploaded file between the front end and the back end.

5. The method according to claim 4, wherein The creating a fromdata object to store the uploaded file includes: After converting the uploaded file into a binary large object using the NewBlob method, use the append method to store the large object in the fromdata object.

6. The method according to claim 5, wherein The obtaining the upload progress and performing parameter passing includes: Define the progressEvent method to obtain the upload progress, recalculate the upload progress into a percentage, and pass the defined progressEvent method and the fromdata object as parameters to the encapsulated axios method.

7. The method according to claim 6, characterized in that, Determining the parameter passing path and performing component encapsulation includes: Determine the parameter passing path of each parameter, perform binding of each parameter, and encapsulate the el-upload component and the el-progress component.

8. An encapsulation device for a file upload component based on vue, characterized in that, It includes: The el-upload component creation module is used to introduce the el-upload component and create a custom upload method; The el-progress component creation module is used to introduce the el-progress component and bind the upload progress value; The file size limit module is used to limit the size of the uploaded file in the custom method; The file storage module is used to create a fromdata object to store the uploaded file; The upload module is used to obtain the upload progress and perform parameter passing; The component encapsulation module is used to determine the parameter passing path and perform component encapsulation.

9. An electronic device, characterized in that, The electronic device includes: A memory storing executable instructions; A processor that runs the executable instructions in the memory to implement the encapsulation method of the vue-based file upload component according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it implements the encapsulation method of the vue-based file upload component described in any one of claims 1-7.

Images