How to implement the file upload function in slices through Vue2.0 combined with webuploader (detailed tutorial)

This article mainly introduces the function of Vue2.0 combined with webuploader to implement file segmentation upload. It is very good and has reference value. Friends in need can refer to it

Encountered large file segmentation in the Vue project Regarding the upload problem, I have used webuploader before, so I simply combined Vue2.0 with webuploader to encapsulate a vue upload component, which is more comfortable to use.

Upload, just upload it. Why is it so troublesome to upload in parts?

The combination of fragmentation and concurrency splits a large file into multiple blocks and uploads them concurrently, which greatly improves the upload speed of large files.

When network problems cause transmission errors, only the error fragments need to be retransmitted, not the entire file. In addition, fragmented transmission can track the upload progress in more real-time.

The interface after implementation:

There are mainly two files, the encapsulated upload component and the specific ui page. The upload component code is listed below. The codes of these two pages are put on github: https://github.com/shady-xia/Blog/tree/master/vue-webuploader.

Introduce webuploader into the project

1. First introduce jquery into the system (the plug-in is based on jq, it’s a scam!), if you don’t If you know where to put it, put it in index.html.

2. DownloadUploader.swfandwebuploader.min.json the official website, which can be placed under the static directory of the project; introduce webuploader in index.html .min.js.

（无需单独再引入 webuploader.css ，因为没有几行css，我们可以复制到vue组件中。）  

Points to note:

1. In the vue component, passimport './webuploader'; importwebuploader, the error 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode...' will be reported. This is because your babel uses Strict mode, and callers are prohibited from being used in strict mode. Therefore, you can directly introducewebuploader.jsintoindex.html, or manually solve the 'use strict' problem in babel.

Encapsulating Vue components based on webuploader

The encapsulated component upload.vue is as follows. The interface can be expanded according to specific business.

Note: Function and UI are separated. This component encapsulates the basic functions and does not provide UI. The UI is implemented on specific pages.

Use the encapsulated upload component

Create a new page. The usage examples are as follows:

ui needs to be implemented by yourself. The approximate code can be found here.

The principle and process of fragmentation

When we upload a large file, it will be fragmented by the plug-in, and the ajax request is as follows:

1. Multiple upload requests are all fragmented requests. The large file is divided into multiple small parts and delivered to the server one at a time

2. fragmentation After completion, that is, after the upload is completed, a merge request needs to be passed to the server to let the server combine multiple fragmented files into one file
Fragmentation

You can see that multiple upload requests have been initiated. We Let’s take a look at the specific parameters sent by upload:

The guid in the first configuration (content-disposition) and the access_token in the second configuration , it is the formData in the webuploader configuration, that is, the parameters passed to the server

The following configurations are the file content, id, name, type, size, etc.

chunks is the total fragmentation number, chunk is the current fragment. They are 12 and 9 respectively in the picture. When you see an upload request with chunk 11, it means that this is the last upload request.

Merge

After sharding, the files have not been integrated, and the data probably looks like the following:

After completing the sharding, the work is not over yet. We have to send another ajax request to the server, telling him to merge the several shards we uploaded into a complete file.

How do I know that the multipart upload is complete and when should I merge it?

webuploaderThe plug-in has an eventuploadSuccess, which contains two parameters, file and response returned by the background; when all fragments are uploaded, this event will be triggered ,

We can use the fields returned by the server to determine whether to merge.

For example, needMerge is returned in the background. When we see that it is true, we can send a merge request.

Known issues

When pausing and continuing to upload a single file, a bug in this plug-in was discovered:

1 . When the setthreads>1is used and the single file upload function is used, that is, when the stop method is passed in file, an errorUncaught TypeError: Cannot read property 'file' of undefined

The source code of the error is as follows: This is because in order to allow the next file to continue to be transferred during the pause, the paused file stream will be popped out of the current pool. A loop is made here, and v is undefined during the last loop.

2. Set threads to 1 and it can be paused normally, but uploading after pausing will fail.

The principle is the same as the previous one. During the pause, all current file streams are popped in the pool. When the file starts to be uploaded, the current pool will be checked. At this time, there are no previously paused file streams.

If it is to pause and continue all files as a whole, the function is normal.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

In-depth understanding of Node module module

Summary of 10 advanced techniques for using Console to debug

About the difference between v-if and v-show in vuejs and the problem that v-show does not work

The above is the detailed content of How to implement the file upload function in slices through Vue2.0 combined with webuploader (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!