> **The document uses Google Translate** ## Install ### npm install ``` bash npm install vue-upload-component --save ``` ``` js const VueUploadComponent = require('vue-upload-component') Vue.component('file-upload', VueUploadComponent) ``` ### html install ``` html ``` ## Usage ### Example https://lian-yue.github.io/vue-upload-component/ ### Example source code https://github.com/lian-yue/vue-upload-component/tree/2.0/example ### html ```html Vue-upload-component Test
Upload file
``` ### SSR (Server isomorphism) ```js import FileUpload from 'vue-upload-component/src' ``` ### webpack.config.js ```js const nodeExternals = require('webpack-node-externals'); { //..... externals: [ nodeExternals({whitelist:[/^vue-upload-component/]}) ] //..... } ``` *** ## Props ### inputId * **Type:** `String` * **Default:** `this.name` * **Description:** The `id` attribute of the input tag * **Usage:** ```html ``` ### name * **Type:** `String` * **Default:** `file` * **Description:** The `name` attribute of the input tag * **Usage:** ```html ``` ### post-action * **Type:** `String` * **Default:** `undefined` * **Description:** `POST` Request upload URL * **Usage:** ```html ``` ### put-action * **Type:** `String` * **Default:** `undefined` * **Description:** `PUT` Request upload URL `put-action` is not empty Please give priority to` PUT` request Required `html5` support * **Usage:** ```html ``` ### headers * **Type:** `Object` * **Default:** `{}` * **Description:** Attach `header` data Required `html5` support * **Usage:** ```html ``` ### data * **Type:** `Object` * **Default:** `{}` * **Description:** `POST request`: Append request `body` `PUT request`: Append request `query` * **Usage:** ```html ``` ### value, v-model * **Type:** `Array` * **Default:** `[]` * **Description:** File List **In order to prevent unpredictable errors, can not directly modify the `files`, please use [`add`](#add), [`update`](#update), [`remove`](#remove) method to modify** * **[File object](#file)** * **Usage:** ```html ``` ### accept * **Type:** `String` * **Default:** `undefined` * **Description:** The `accept` attribute of the input tag, MIME type Required `html5` support * **Usage:** ```html ``` ### multiple * **Type:** `Boolean` * **Default:** `false` * **Description:** The `multiple` attribute of the input tag Whether to allow multiple files to be selected If it is `false` file inside only one file will be automatically deleted * **Usage:** ```html ``` ### directory * **Type:** `Boolean` * **Default:** `false` * **Description:** The `directory` attribute of the input tag Whether it is a upload folder * **[View supported browsers](http://caniuse.com/#feat=input-file-directory)** * **Usage:** ```html ``` ### extensions * **Type:** `Array | String | RegExp` * **Default:** `undefined` * **Description:** Allow upload file extensions * **Usage:** ```html ``` ### size * **Type:** `Number` * **Default:** `0` * **Description:** Allow the maximum byte to upload * **Usage:** ```html ``` ### timeout * **Type:** `Number` * **Default:** `0` * **Description:** Upload timeout time in milliseconds * **Usage:** ```html ``` ### thread * **Type:** `Number` * **Default:** `1` * **Description:** Also upload the number of files at the same time (number of threads) Required `html5` support * **Usage:** ```html ``` ### drop * **Type:** `Boolean | Element | CSS selector` * **Default:** `false` * **Description:** Drag and drop upload If set to `true`, read the parent component as a container Required `html5` support * **[View supported browsers](http://caniuse.com/#feat=dragndrop)** * **Usage:** ```html ``` ### drop-directory * **Type:** `Boolean` * **Default:** `true` * **Description:** Whether to open the drag directory If set to `false` filter out the directory * **Usage:** ```html ``` *** ## Events ### @input * **Arguments:** * `files: Array` * **Description:** The files is changed to trigger the method Default for `v-model` binding * **Usage:** ```html ``` ```js { data() { return { files: [] } }, methods: { updatetValue(value) { this.files = value } } } ``` ### @input-filter * **Arguments:** * `newFile: Object | undefined` `Read and write` * `oldFile: Object | undefined` `Read only` * `prevent: Function` * **Description:** Add, update, remove pre-filter You can not use `update`,` add`, `remove`,` clear` methods in the event The `newFile` object can be modified within the event `prevent()` can prevent modification * **Usage:** ```html ``` ```js { data() { return { files: [] } }, methods: { inputFilter(newFile, oldFile, prevent) { if (newFile && !oldFile) { // Add file // Filter non-image file // Will not be added to files if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.file)) { return prevent() } // Create the `blob` field for thumbnail preview newFile.blob = '' let URL = window.URL || window.webkitURL if (URL && URL.createObjectURL) { newFile.blob = URL.createObjectURL(newFile.file) } } if (newFile && oldFile) { // Update file // Increase the version number if (!newFile.version) { newFile.version = 0 } newFile.version++ } if (!newFile && oldFile) { // Remove file // Refused to remove the file // return prevent() } } } } ``` ### @input-file * **Arguments:** * `newFile: Object | undefined` `Read only` * `oldFile: Object | undefined` `Read only` * **Description:** Add, update, remove after You can use `update`,` add`, `remove`,` clear` methods in the event You can not modify the `newFile` object in the event You can not modify the `oldFile` object in the event * **Usage:** ```html ``` ```js { data() { return { files: [] } }, methods: { inputFile(newFile, oldFile) { if (newFile && !oldFile) { // Add file // Automatic upload if (!this.$refs.upload.active) { this.$refs.upload.active = true } } if (newFile && oldFile) { // Update file // Start upload if (newFile.active !== oldFile.active) { console.log('Start upload', newFile.active, newFile) // min size if (newFile.size >= 0 && newFile.size < 100 * 1024) { newFile = this.$refs.upload.update(newFile, {error: 'size'}) } } // Upload progress if (newFile.progress !== oldFile.progress) { console.log('progress', newFile.progress, newFile) } // Upload error if (newFile.error !== oldFile.error) { console.log('error', newFile.error, newFile) } // Uploaded successfully if (newFile.success !== oldFile.success) { console.log('success', newFile.success, newFile) } } if (!newFile && oldFile) { // Remove file // Automatically delete files on the server if (oldFile.success && oldFile.response.id) { // $.ajax({ // type: 'DELETE', // url: '/file/delete?id=' + oldFile.response.id, // }); } } } } } ``` *** ## Methods ### get * **Arguments:** * `id: Object | String` File object | file id * **Result：** `Object | Boolean` There is a return file object that otherwise returns `false` * **Description:** Use `id` to get a file object ### add * **Arguments:** * `files: Object | Array | window.File` File object | file array (multiple) | window.File object * `start: Boolean` Whether it is inserted from the start position * **Result：** `Object | Array | Boolean` The incoming array is returned to the array otherwise the object or `false` * **Description:** Add one or more files * **Usage:** ```html
  • {{file.name}}
``` ```js { data() { return { files: [] } }, methods: { addText() { let file = new File(['foo'], 'foo.txt', { type: "text/plain", }) this.$refs.upload.add(file) } } } ``` ### update * **Arguments:** * `id: Object | String` File object | file id * `data: Object` Updated data object * **Result：** `Object | Boolean` Successfully returned `newFile` failed to return` false` * **Description:** Update a file object * **Usage:** ```html
  • {{file.name}}
``` ```js { data() { return { files: [] } }, methods: { abort(file) { this.$refs.upload.update(file, {active: false}) // or // this.$refs.upload.update(file, {error: 'abort'}) } } } ``` ### remove * **Arguments:** * `id: Object | String` File object | file id * **Result：** `Object | Boolean` Successfully returned `oldFile` failed to return` false` * **Description:** Remove a file object * **Usage:** ```html
  • {{file.name}}
``` ```js { data() { return { files: [] } }, methods: { remove(file) { this.$refs.upload.remove(file) } } } ``` ### clear * **Result：** `Boolean` Always return `true` * **Description:** Empty the file list *** ## Component Data data ### features * **Type:** `Object` * **Read only:** `true` * **Default:** `{html5: true, directory: false, drag: false}` * **Description:** Used to determine the browser support features * **Usage:** ```html Support drag and drop upload Support folder upload Support for HTML5 ``` ### active * **Type:** `Boolean` * **Read only:** `false` * **Default:** `false` * **Description:** Activation or abort upload * **Usage:** ```html Start upload Stop upload ``` ### dropActive * **Type:** `Boolean` * **Read only:** `true` * **Default:** `false` * **Description:** Is dragging * **Usage:** ```html Drag and drop here for upload ``` ### uploaded * **Type:** `Boolean` * **Read only:** `true` * **Default:** `true` * **Description:** All uploaded * **Usage:** ```html All files have been uploaded ``` *** ## File > **File object in the `input-filter` event outside the use of [`update`] (#update) method** ### id * **Type:** `String | Number` * **Read only:** `true` * **Default:** `Math.random().toString(36).substr(2)` * **Description:** File ID ### size * **Type:** `Number` * **Read only:** `false` * **Default:** `-1` * **Description:** File size Required `html5` support ### name * **Type:** `String` * **Read only:** `false` * **Default:** ` ` * **Description:** Filename Format: `directory/filename.gif` `filename.gif` ### type * **Type:** `String` * **Read only:** `false` * **Default:** `empty` * **Description:** MIME type Format: `image/gif` `image/png` `text/html` Required `html5` support ### active * **Type:** `Boolean` * **Read only:** `false` * **Default:** `false` * **Description:** Activation or abort upload `true` = Upload `false` = Abort ### error * **Type:** `String` * **Read only:** `false` * **Default:** ` ` * **Description:** Upload failed error code Built-in `size`, `extension`, `timeout`, `abort`, `network`, `server`, `denied` ### success * **Type:** `Boolean` * **Read only:** `false` * **Default:** `false` * **Description:** Whether the upload was successful ### putAction * **Type:** `String` * **Read only:** `false` * **Default:** `this.putAction` * **Description:** Customize the current file `PUT` URL ### postAction * **Type:** `String` * **Read only:** `false` * **Default:** `this.postAction` * **Description:** Customize the current file `POST` URL ### headers * **Type:** `Object` * **Read only:** `false` * **Default:** `this.headers` * **Description:** Customize the current file `HTTP` Header ### data * **Type:** `Object` * **Read only:** `false` * **Default:** `this.data` * **Description:** Customize the current file `body` or` query` to attach content ### timeout * **Type:** `Number` * **Read only:** `false` * **Default:** `0` * **Description:** Customize the upload timeout for a current single file ### response * **Type:** `Object | String` * **Read only:** `false` * **Default:** `{}` * **Description:** Response data ### progress * **Type:** `String` * **Read only:** `true` * **Default:** `0.00` * **Description:** Upload progress ### speed * **Type:** `Number` * **Read only:** `true` * **Default:** `0` * **Description:** Per second upload speed ### xhr * **Type:** `XMLHttpRequest` * **Read only:** `true` * **Default:** `undefined` * **Description:** `HTML5` upload` XMLHttpRequest` object ### iframe * **Type:** `Element` * **Read only:** `true` * **Default:** `undefined` * **Description:** `HTML4` upload` iframe` element