vue-simple-file-upload

a simple vue file upload component using XHR

vue file upload component use XHR

demo: http://demo.2017017.xyz/vue-demo/#/vue-simple-file-upload

1. Install

npm install vue-simple-file-upload

2. Usage

# global injection import VueSimpleUpload from 'vue-simple-file-upload' Vue.use(VueSimpleUpload) ... 

# component injection ... <script> import { VueSimpleUpload } from 'vue-simple-file-upload'  export default {   components: { VueSimpleUpload },   ... } 

<template>   <div>     <vue-simple-upload       :options="options"       @progress-update="progressUpdate"       @file-size-error="fileSizeError"     >     </vue-simple-upload>   </div> </template> <script> export default {   data() {     return {       options: {         className: 'btn-solid',         btnContent: 'Click Me',         url: '/api/files/upload',         accept: 'image/png'       },       imageUrl: ''     }   },    methods: {     fileSizeError(fileNames) {       console.error('Files blow are oversized: ', ...fileNames)     },     progressUpdate(fileInfoList) {       console.log("upload speed（kb/s）：", fileInfoList[0].uploadSpeed)       if (fileInfoList[0].type === 'success') {         // do something       }     }   } } </script> 

3. options

• url
  • file uploading request url
  • type String
  • required Yes
• btnContent:
  • 'choose file' botton content
  • type String
  • required No
  • default 'Choose File'
• className:
  • 'choose file' botton class name
  • type String ps:multiple className can be added, use space split them
  • required No
  • default ''
• accept
  • file type accepted
  • type String ps:same as the 'accept' attribute in <input>
  • required No
  • default '*'
• multiple
  • multiple files upload
  • type Boolean
  • required No
  • default false
• size
  • the max file size can be uploaded (Unit: byte)
  • type Number
  • required No
  • default 0 (∞)
• autoStart
  • auto upload files after selected
  • type Boolean
  • required No
  • default true
• formData
  • custom form-data
  • type Object
  • required No
  • default {}
• headers
  • custom headers
  • type Object
  • required No
  • default {}

4. dynamic upload progress

'$emit' function will send the upload message to its parent component, and this function takes one parameter : fileList (Array)

fileList example:

[   {     fileInfo: File // the first file you choose.     fileName // the name of first file you choose.     progress // uploaded progress. eg: '15.01%'     uploadSpeed // uploading speed. eg: '1001'(kb/s)     type // uploading status, could be 'waiting', 'uploading', 'success' or 'fail' or 'abort'     id // an unique string, used for upload abort     response // upload requset response (if your file is uploading, this will be an empty Object)   },   ... // more fileList object if it's uploading multiple files ] 

5. catch oversized error

Use '$emit' function to catch oversized error, just like example in '2. Usage'.

6. abort

Abort the uploading request by using this.$refs.XXX.abort()

eg:

<vue-simple-upload :options="options" v-on:progress-update="progressUpdate" ref="fileUploadSection"> </vue-simple-upload>  ... methods: {   ...   abort(id) {     this.$refs.fileUploadSection.abort() // abort all uploading files     this.$refs.fileUploadSection.abort(id) // abort one uploading file by fileInfoList.id   }   ... } 

7. custom Start // 2017-12-28

If setting "autoStart: false" in your config. You can custom start upload by "id" (default: "all")

eg:

<vue-simple-upload :options="options" v-on:progress-update="progressUpdate" ref="fileUploadSection"> </vue-simple-upload>  ... methods: {   ...   startUpload(id) {     this.$refs.fileUploadSection.startUpload() // start uploading all files which "type === 'waiting'"     this.$refs.fileUploadSection.startUpload(id) // start uploading file by fileInfoList.id   }   ... }   // 2017-12-28 TODO: drag upload.