I. Source of documents

Git address https://github.com/simple-uploader/vue-uploaderCopy the code

SRC directory

General | | - common / / -- file - events. The js / / part of the file name of the event | -- mixins. Js / / injection uploader judgment support | -- utils. Js / / tools | - components function / / component | -- BTN. Vue / / button to upload | -- drop. Vue / / drag and drop upload | -- file. Vue / / core - single file upload | - files. Vue / / multiple file upload into the file. The vue | -- list. Vue / / file list and files. The vue contents are basically identical | - unsupport. Vue / / does not support the file API component | -- uploader. Vue | -- index. / / the main components of js / / global export registrationCopy the code

Iii. Detailed explanation of each file

1, uploader. Vue

The introduction of

Introducing the Uploader instance introducing the humped string-to-hyphenated string function introducing all the other componentsCopy the code

Page logic

(1) Provide uploader to this to be called in a child component

(2) Create an instance of Uploader in Created, bind all functions of file add, folder add, file remove, file submit, bind, assign this instance to this.uploader and upload status copy dictionary under this.uploader

Unbind this. Uploader from the above function and destroy this. Uploader in the destroyed window

props
AutoStart option {Object} to upload configuration parameters {Boolean} whether automatic upload fileStatusText {Object | Function} state document to uploadCopy the code

2, BTN. Vue

Page logic

(1) Obtain uploader instance and support through Minxin

(2) Display components according to File API support

Mounted uses uploader’s assignBrowse binding DOM to specify that uploader can trigger uploads

prop

Directory {Boolean} Whether a folder is uploaded single {Boolean} Whether a single file is uploaded attrsCopy the code

3. Drop. Vue to drop the upload component

Page logic

(1) Obtain uploader instance and support through Minxin

(2) Display components according to File API support

Mounted Uploader’s assignDrop dom can trigger drag and drop uploader. Listen for drag in, drag out, drag functions, and bind events

Remove the above binding function and cancel the specified DOM element as the drag upload target in beforeDestroyed

List. Vue and files.vue

(1) Obtain uploader instance from minxin (2) import./file.vue

5, unsupport. Vue

Page logic

(1) Obtain uploader instance and support through Minxin. (2) Display the component if File API is not supported

6, the file. The vue

The introduction of

1 Introduce uploader.js (this article is the same as minxin, you can try to optimize) 2 introduce file-event 3 Introduce time conversionCopy the code

Page logic

In Mounted, assign method to Uploader instance; Set action events; Bind events for listening operations;

(2) Remove event monitoring in destroyed; Empty action events;

prop

File {Object} The current file to be uploaded list {Boolean} The meaning is unknownCopy the code

computed

File type progressStyle progressStyle formatedAverageSpeed download speed status file upload and download status statusText state file formatedTimeRemaining timeCopy the code

watch

Status Class that monitors the status change progressCopy the code

methods

_actionCheck // Return to real-time upload status pause // Resume // Continue uploading remove // Remove download // Download Retry // Upload processResponse // FileEventsHandler // File event operation _fileProgress // Obtain upload progress _fileSuccess // File upload success _fileError // File upload failureCopy the code