Secondary packaging method and device for file uploading component based on vue

Abstract

The invention provides a vue-based secondary packaging method and device for a file uploading component, and solves the problems that the development steps for a file uploading function are tedious and complex, and a third-party component with the uploading function cannot completely meet business requirements. The secondary packaging method of the file uploading component based on the vue comprises the following steps: creating an el-upload component and an el-profile component in a vue page; obtaining the size of a target uploaded file based on the el-upload component, and judging whether the size of the target uploaded file meets an uploading standard or not; if yes, the target uploading file is uploaded, and the uploading progress is obtained based on the el-process component; after uploading is completed, the uploaded target uploading file is preprocessed and stored; and packaging the stored target uploading file, and obtaining a vue component.

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 secondary encapsulation of 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 has cumbersome steps and is not convenient for development. As a front - end framework for component - based development, vue is becoming increasingly popular among front - end developers. Component - based development brings good code reuse, greatly reducing the amount of code developed. However, in business requirements, various third - party components for file upload functions often do not meet the requirements and need to be customized for upload to meet business needs. Summary of the Invention

[0003] In view of this, the present invention provides a method and device for secondary encapsulation of a file upload component based on vue, which solves the problems that the development steps for file upload functions are cumbersome and complex, and the third - party components for upload functions cannot fully meet business requirements.

[0004] In a first aspect, a method for secondary encapsulation of a file upload component based on vue provided by an embodiment of the present invention includes:

[0005] Create an el - upload component and an el - progress component in a vue page;

[0006] Based on the el - upload component, obtain the size of the target upload file, and determine whether the size of the target upload file meets the upload standard;

[0007] If so, upload the target upload file, and obtain the upload progress based on the el - progress component;

[0008] After the upload is completed, pre - process and store the uploaded target upload file;

[0009] Encapsulate the stored target upload file and obtain a vue component.

[0010] In an implementation, creating the el - upload component in the vue page includes: introducing the el - upload component in the vue page, and creating a custom upload method in the :http - request: attribute in the el - upload component.

[0011] In one embodiment, an el-progress component is created in a vue page, including: introducing the el-progress component in the vue page and binding the variable representing the progress value under the :percentage attribute in the el-progress component.

[0012] In one embodiment, obtaining the upload progress based on the el-progress component includes: obtaining the upload progress based on the progressEvent method and obtaining the upload progress percentage based on the obtained upload progress.

[0013] In one embodiment, preprocessing and storing the target upload file to be uploaded includes:

[0014] Creating a fromdata object and storing the target upload file to be uploaded in the fromdata object;

[0015] Converting the target upload file to be uploaded into a binary large object using the NewBlob method;

[0016] Storing the converted target upload file in the fromdata object using the append method.

[0017] In one embodiment, encapsulating the stored target upload file includes: passing the fromdata object as a parameter to the encapsulated axios method to encapsulate the stored target upload file.

[0018] In one embodiment, encapsulating the stored target upload file and obtaining a vue component includes: processing the parameter passing in the target upload file, binding each parameter well, and exporting the vue component.

[0019] In a second aspect, a secondary encapsulation device for a file upload component based on vue provided by an embodiment of the present invention includes:

[0020] A component creation module for creating an el-upload component and an el-progress component in a vue page;

[0021] A data acquisition module for obtaining the size of the target upload file based on the el-upload component; obtaining the upload progress based on the el-progress component;

[0022] A judgment module for judging whether the size of the target upload file meets the upload standard;

[0023] A file upload module for uploading the target upload file;

[0024] A data processing and storage module for preprocessing and storing the uploaded target upload file;

[0025] An encapsulation module for encapsulating the stored target upload file and obtaining a vue component.

[0026] In a third aspect, an electronic device provided by an embodiment of the present invention includes a memory and a processor, where the memory is used to store one or more computer instructions, and when the one or more computer instructions are executed by the processor, the encapsulation method of the vue-based file upload component as described above is implemented.

[0027] In a fourth aspect, a computer-readable storage medium provided by an embodiment of the present invention stores a computer program, and when the computer program is executed by one or more processors, it is used to implement the encapsulation method of the vue-based file upload component as described above.

[0028] A secondary encapsulation method and device for a vue-based file upload component provided by an embodiment of the present invention introduce an el-upload component and customize an upload method in a vue page; introduce an el-progress component and bind the value of the progress bar; display the file size in the defined method; define and process upload parameters; obtain the upload progress; perform preprocessing of the parameters and encapsulate them into a component, and this component can be reused at multiple locations. It solves the problem that the development steps of the file upload function in the business are cumbersome and complex, saves development time and efficiency, avoids code redundancy, greatly reduces the later maintenance cost of the file upload function, and thus reduces the difficulty of secondary development of the file upload function. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 The figure shows a schematic flow chart of a secondary encapsulation method for a vue-based file upload component provided by an embodiment of the present invention.

[0030] Figure 2 The figure shows a schematic flow chart of a secondary encapsulation device for a vue-based file upload component provided by an embodiment of the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0031] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0032] Example 1:

[0033] This embodiment provides a method for secondary encapsulation of a file upload component based on vue, as Figure 1 shown. The method for secondary encapsulation of the file upload component based on vue includes:

[0034] Step 01: Create an el-upload component and an el-progress component in the vue page;

[0035] Step 02: Obtain the size of the target upload file based on the el-upload component, and determine whether the size of the target upload file meets the upload standard;

[0036] Step 03: If so, upload the target upload file, and obtain the upload progress based on the el-progress component;

[0037] Step 04: After the upload is completed, preprocess and store the uploaded target upload file;

[0038] Step 05: Encapsulate the stored target upload file and obtain a vue component.

[0039] The present invention forms a new vue component by secondary encapsulation of the el-upload component and the el-progress component. This new vue component can be reused at multiple locations. It solves the problems that the development steps of the file upload function in the business are cumbersome and complex, saves development time and efficiency, avoids code redundancy, greatly reduces the later maintenance cost of the file upload function, and reduces the difficulty of secondary development of the file upload function.

[0040] Example 2:

[0041] This embodiment provides a method for secondary encapsulation of a file upload component based on vue. The method for secondary encapsulation of the file upload component based on vue includes:

[0042] Step 01: Create an el-upload component and an el-progress component in the vue page.

[0043] Specifically, it includes: introducing the el-upload component in the vue page, and creating a custom upload method in the :http-request: attribute of the el-upload component. Introduce the el-progress component in the vue page, and bind the variable representing the progress value under the :percentage attribute of the el-progress component. Optionally, scss can be used to modify the progress bar style.

[0044] Step 02: Obtain the size of the target upload file based on the el-upload component, and determine whether the size of the target upload file meets the upload standard.

[0045] In the above custom upload method, the specific size of the upload file is judged according to the param.file.size attribute, and then it is judged whether the selected upload file meets the upload standard according to the size of the upload file agreed upon by the front end and the back end.

[0046] Step 03: If so, upload the target upload file, and obtain the upload progress based on the el-progress component.

[0047] Specifically, it includes: obtaining the upload progress based on the progressEvent method, and obtaining the upload progress percentage based on the obtained upload progress.

[0048] Step 04: After the upload is completed, preprocess and store the uploaded target upload file.

[0049] Specifically, the preprocessing and storing of the uploaded target upload file includes:

[0050] Step 041: Create a fromdata object, and store the uploaded target upload file in the fromdata object;

[0051] Step 042: Convert the uploaded target upload file into a binary large object using the NewBlob method;

[0052] Step 043: Deposit the converted target upload file into the fromdata object using the append method.

[0053] Specifically, the encapsulation of the stored target upload file includes: passing the fromdata object as a parameter to the encapsulated axios method to encapsulate the stored target upload file.

[0054] Step 05: Encapsulate the stored target upload file and obtain a vue component. Specifically, process the parameter passing in the target upload file, bind each parameter well, and export the vue component, so as to realize the reuse of components in multiple positions.

[0055] A method and device for secondary encapsulation of a file upload component based on vue provided by the present invention. In the vue page, the el-upload component is introduced and the upload method is customized; the el-progress component is introduced and the value of the progress bar is bound; the file size is displayed in the defined method; the upload parameters are defined and processed; the upload progress is obtained; the preprocessing of the parameters is done and encapsulated into a component, and this component can be reused at multiple locations. It solves the problem that the development steps of the file upload function in the business are cumbersome and complex, saves development time and efficiency, avoids code redundancy, greatly reduces the later maintenance cost of the file upload function, and thus reduces the difficulty of secondary development of the file upload function.

[0056] Example 3:

[0057] This embodiment provides a device 100 for secondary encapsulation of a file upload component based on vue. As Figure 2 shown, the device 100 for secondary encapsulation of a file upload component based on vue includes: a component creation module 10, a data acquisition module 20, a judgment module 30, a file upload module 40, a data processing and storage module 50, and an encapsulation module 60.

[0058] The component creation module 10 is used to create an el-upload component and an el-progress component in the vue page;

[0059] The data acquisition module 20 is used to obtain the size of the target upload file based on the el-upload component; obtain the upload progress based on the el-progress component;

[0060] The judgment module 30 is used to judge whether the size of the target upload file meets the upload standard;

[0061] The file upload module 40 is used to upload the target upload file;

[0062] The data processing and storage module 50 is used to preprocess and store the uploaded target upload file;

[0063] The encapsulation module 60 is used to encapsulate the stored target upload file and obtain a vue component.

[0064] Furthermore, the component creation module 10 is further used to introduce the el-upload component in the vue page, and create a custom upload method in the :http-request: attribute in the el-upload component.

[0065] Further, the component creation module 10 is also used to introduce the el-progress component in the vue page and bind the variable representing the progress value under the :percentage attribute in the el-progress component.

[0066] Further, the data acquisition module 20 is also used to obtain the upload progress based on the progressEvent method and obtain the upload progress percentage based on the obtained upload progress.

[0067] Further, the data processing and storage module 50 is also used to create a fromdata object, store the target upload file to be uploaded in the fromdata object; convert the target upload file to be uploaded into a binary large object using the NewBlob method; and store the converted target upload file into the fromdata object using the append method.

[0068] Further, the encapsulation module 60 is also used to pass the fromdata object as a parameter to the encapsulated axios method to encapsulate the stored target upload file.

[0069] Further, the encapsulation module 60 is also used to handle the parameter passing in the target upload file, bind each parameter well, and export the vue component.

[0070] The present invention uses the el-upload component and the el-progress component for secondary encapsulation into one component, shortening the development steps and saving development time and efficiency. At the same time, it also meets the business requirements, improves user satisfaction, and solves the problems of cumbersome and complex development steps for the file upload function and the inability of third-party components for the upload function to fully meet the business requirements.

[0071] Example 4:

[0072] This embodiment provides an electronic device, which can be a mobile phone, a computer, a tablet computer, etc., including a memory and a processor. A computer program is stored on the memory, and when the computer program is executed by the processor, it implements the encapsulation method of the vue-based file upload component as described in Embodiment 1. It can be understood that the electronic device may further include an input / output (I / O) interface and a communication component.

[0073] Among them, the processor is used to execute all or part of the steps in the encapsulation method of the vue-based file upload component in Embodiment 1. Specifically, it includes:

[0074] Step 01: Create an el-upload component and an el-progress component in the vue page.

[0075] Specifically, it includes: introducing the el-upload component in the vue page, and creating a custom upload method in the :http-request: attribute of the el-upload component. Introducing the el-progress component in the vue page, and binding the variable representing the progress value under the :percentage attribute of the el-progress component. Optionally, scss can be used to modify the progress bar style.

[0076] Step 02: Obtain the size of the target upload file based on the el-upload component, and determine whether the size of the target upload file meets the upload standard.

[0077] In the above custom upload method, judge the specific size of the upload file according to the param.file.size attribute of the parameter, and then judge whether the selected upload file meets the upload standard according to the size of the upload file agreed upon by the front end and the back end.

[0078] Step 03: If so, upload the target upload file, and obtain the upload progress based on the el-progress component.

[0079] Specifically, it includes: obtaining the upload progress based on the progressEvent method, and obtaining the upload progress percentage based on the obtained upload progress.

[0080] After the upload is completed, preprocess and store the uploaded target upload file.

[0081] Specifically, the preprocessing and storing of the uploaded target upload file includes:

[0082] Step 041: Create a fromdata object, and store the uploaded target upload file in the fromdata object;

[0083] Step 042: Convert the uploaded target upload file into a binary large object using the NewBlob method;

[0084] Step 043: Store the converted target upload file in the fromdata object using the append method.

[0085] Specifically, the encapsulation of the stored target upload file includes: passing the fromdata object as a parameter to the encapsulated axios method to encapsulate the stored target upload file.

[0086] Step 05: Package the stored target upload file and obtain a vue component. Specifically, handle the parameter passing in the target upload file, bind each parameter, and export the vue component, thereby realizing the reuse of components in multiple locations.

[0087] A method and device for secondary packaging of a file upload component based on vue provided by the present invention. In a vue page, introduce the el-upload component and customize the upload method; introduce the el-progress component and bind the value of the progress bar; display the file size in the defined method; define and process upload parameters; obtain the upload progress; perform preprocessing of the parameters and package them into a component, and this component can be reused at multiple locations. It solves the problem that the development steps of the file upload function in the business are cumbersome and complex, saves development time and efficiency, avoids code redundancy, greatly reduces the later maintenance cost of the file upload function, and thus reduces the difficulty of secondary development of the file upload function.

[0088] The memory is used to store various types of data, which may include, for example, instructions of any application or method in the electronic device, as well as application-related data.

[0089] The processor may be implemented by an application specific integrated circuit (ASIC), a digital signal processor (DSP), a programmable logic device (PLD), a field programmable gate array (FPGA), a controller, a microcontroller, a microprocessor, or other electronic components, and is used to execute the method for packaging a file upload component based on vue in the first embodiment above.

[0090] The memory can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disc.

[0091] Example 5:

[0092] This embodiment also provides a computer-readable storage medium. In each embodiment of the present invention, each functional unit can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit. If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0093] Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or a part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present invention.

[0094] The aforementioned storage medium includes: flash memory, hard disk, multimedia card, card-type memory (such as SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disc, server, APP application store, and other various media that can store program verification codes. A computer program is stored thereon, and when the computer program is executed by a processor, the following method steps can be implemented:

[0095] Step 01: Create an el-upload component and an el-progress component in the vue page.

[0096] Specifically, it includes: introducing the el-upload component in the vue page, and creating a custom upload method in the :http-request: attribute of the el-upload component. Introducing the el-progress component in the vue page, and binding the variable representing the progress value under the :percentage attribute of the el-progress component. Optionally, scss can be used to modify the progress bar style.

[0097] Step 02: Obtain the size of the target upload file based on the el-upload component, and determine whether the size of the target upload file meets the upload standard.

[0098] In the above custom upload method, judge the specific size of the upload file according to the param.file.size attribute of the parameter, and then judge whether the selected upload file meets the upload standard according to the size of the upload file agreed upon by the front end and the back end.

[0099] Step 03: If so, upload the target upload file, and obtain the upload progress based on the el-progress component.

[0100] Specifically, it includes: obtaining the upload progress based on the progressEvent method, and obtaining the upload progress percentage based on the obtained upload progress.

[0101] After the upload is completed, preprocess and store the uploaded target upload file.

[0102] Specifically, the preprocessing and storing of the uploaded target upload file includes:

[0103] Step 041: Create a fromdata object, and store the uploaded target upload file in the fromdata object;

[0104] Step 042: Convert the uploaded target upload file into a binary large object using the NewBlob method;

[0105] Step 043: Deposit the converted target upload file into the fromdata object using the append method.

[0106] Specifically, the encapsulation of the stored target upload file includes: passing the fromdata object as a parameter to the encapsulated axios method to encapsulate the stored target upload file.

[0107] Step 05: Package the stored target upload file and obtain a vue component. Specifically, process the parameter passing in the target upload file, bind each parameter, and export the vue component, so as to realize the reuse of components in multiple positions.

[0108] A method and device for secondary packaging of a file upload component based on vue provided by the present invention. In a vue page, introduce an el-upload component and customize an upload method; introduce an el-progress component and bind the value of the progress bar; display the file size in the defined method; define and process upload parameters; obtain the upload progress; perform preprocessing of the parameters and package them into a component, and this component can be reused in multiple positions. It solves the problem that the development steps of the file upload function in the business are cumbersome and complex, saves development time and efficiency, avoids code redundancy, greatly reduces the later maintenance cost of the file upload function, and thus reduces the difficulty of secondary development of the file upload function.

[0109] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present invention. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments and will not be repeated here.

[0110] In several embodiments provided in the present application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings, direct couplings, or communication connections to each other can be through some interfaces, and the indirect couplings or communication connections of the devices or units can be in an electrical, mechanical, or other form. The units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0111] The basic principles of the present application have been described in conjunction with specific embodiments. However, it should be noted that the advantages, benefits, effects, etc. mentioned in the present application are only examples and not limitations. It cannot be considered that these advantages, benefits, effects, etc. are essential for each embodiment of the present application. Additionally, the specific details disclosed above are only for illustrative and easy-to-understand purposes, not limitations. These details do not limit the present application to necessarily adopt the above specific details for implementation.

[0112] The block diagrams of the devices, apparatuses, equipment, and systems involved in the present application are only illustrative examples and do not intend to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, equipment, and systems can be connected, arranged, and configured in any manner.

[0113] It should also be noted that in the devices, equipment, and methods of the present application, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be regarded as equivalent solutions of the present application.

[0114] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present application. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the present application. Therefore, the present application is not intended to be limited to the aspects shown herein, but rather to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0115] In the description of the present application, the meaning of "a plurality" is at least two, such as two, three, etc., unless otherwise specifically defined. All directional indications (such as up, down, left, right, front, back, top, bottom...) in the embodiments of the present application are only used to explain the relative positional relationship and movement conditions between components in a specific posture (as shown in the drawings). If the specific posture changes, the directional indications will also change accordingly. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products, or devices.

[0116] In addition, the mention of "embodiments" in this document means that the specific features, structures, or characteristics described in connection with the embodiments can be included in at least one embodiment of the present application. The phrase appears at various places in the specification and does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0117] As described above, the foregoing are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily conceive of changes or substitutions, which should all be covered by the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

[0118] The foregoing are only the preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent substitutions, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for secondary encapsulation of a file upload component based on Vue, characterized in that, it includes: Create an el-upload component and an el-progress component in the Vue page; Obtain the size of the target upload file based on the el-upload component, and determine whether the size of the target upload file meets the upload standard; If so, upload the target upload file, and obtain the upload progress based on the el-progress component; After the upload is completed, preprocess and store the uploaded target upload file; Encapsulate the stored target upload file and obtain a Vue component.

2. The encapsulation method of the file upload component based on Vue according to claim 1, characterized in that, The step of creating an el-upload component in the Vue page includes: introducing the el-upload component in the Vue page, and creating a custom upload method in the :http-request: attribute of the el-upload component.

3. The encapsulation method of the file upload component based on Vue according to claim 1, characterized in that, The step of creating an el-progress component in the Vue page includes: introducing the el-progress component in the Vue page, and binding the variable representing the progress value under the :percentage attribute of the el-progress component.

4. The encapsulation method of the file upload component based on Vue according to claim 1, characterized in that, The step of obtaining the upload progress based on the el-progress component includes: obtaining the upload progress based on the progressEvent method, and obtaining the upload progress percentage based on the obtained upload progress.

5. The encapsulation method of the file upload component based on Vue according to claim 1, characterized in that, The step of preprocessing and storing the uploaded target upload file includes: Create a fromdata object, and store the uploaded target upload file in the fromdata object; Convert the uploaded target upload file into a binary large object using the NewBlob method; Deposit the converted target upload file into the fromdata object using the append method.

6. The encapsulation method of the file upload component based on Vue according to claim 5, characterized in that, The step of encapsulating the stored target upload file includes: passing the fromdata object as a parameter to the encapsulated axios method to encapsulate the stored target upload file.

7. The encapsulation method of the file upload component based on Vue according to claim 1, characterized in that, The step of encapsulating the stored target upload file and obtaining a Vue component includes: processing the parameter transfer in the target upload file, binding each parameter well, and exporting the Vue component.

8. A secondary encapsulation device for a file upload component based on Vue, characterized in that, it includes: A component creation module for creating an el-upload component and an el-progress component in a vue page; A data acquisition module for acquiring the size of a target upload file based on the el-upload component; and acquiring the upload progress based on the el-progress component; A judgment module for judging whether the size of the target upload file meets the upload standard; A file upload module for uploading the target upload file; A data processing and storage module for preprocessing and storing the uploaded target upload file; An encapsulation module for encapsulating the stored target upload file and obtaining a vue component.

9. An electronic device, characterized in that, it includes a memory and a processor, the memory is used for storing one or more computer instructions, wherein, when the one or more computer instructions are executed by the processor, the encapsulation method of the vue-based file upload component as described in any one of claims 1-7 is implemented.

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 one or more processors, it is used to implement the encapsulation method of the vue-based file upload component as described in any one of claims 1-7.

Images