## 安装 ### npm 方式安装 ``` bash npm install vue-upload-component --save ``` ``` js const VueUploadComponent = require('vue-upload-component') Vue.component('file-upload', VueUploadComponent) ``` ### html 方式安装 ``` html ``` ## 使用 ### 例子 https://lian-yue.github.io/vue-upload-component/ ### 例子源代码 https://github.com/lian-yue/vue-upload-component/tree/2.0/example ### html ```html Vue-upload-component Test
Upload file
``` ### SSR (服务器同构) ```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 * **类型：** `String` * **默认值：** `this.name` * **描述：** input标签的 `id` 属性 * **用法：** ```html ``` ### name * **类型：** `String` * **默认值：** `file` * **描述：** input标签的 `name` 属性 * **用法：** ```html ``` ### post-action * **类型：** `String` * **默认值：** `undefined` * **描述：** `POST` 请求的上传URL * **用法：** ```html ``` ### put-action * **类型：** `String` * **默认值：** `undefined` * **描述：** `PUT` 请求的上传URL `put-action` 不为空请优先 `PUT` 请求 需要`HTML5`支持 * **用法：** ```html ``` `PUT` 请求的上传地址 地址不为空请优先 `PUT` 请求 ### headers * **类型：** `Object` * **默认值：** `{}` * **描述：** 自定义 `HTTP Header` 需要`HTML5`支持 * **用法：** ```html ``` ### data * **类型：** `Object` * **默认值：** `{}` * **描述：** `POST 请求`: 附加请求的 body `PUT 请求`: 附加请求的 query * **用法：** ```html ``` ### value, v-model * **类型：** `Array` * **默认值：** `[]` * **描述：** 文件列表 **为了防止不可预知的错误，不可直接修改 `files`，请使用 `add`, `update`, `remove` 方法修改** * **[文件对象信息](#file)** * **用法：** ```html ``` ### accept * **类型：** `String` * **默认值：** `undefined` * **描述：** 表单的`accept`属性, MIME type 需要`HTML5`支持 * **用法：** ```html ``` ### multiple * **类型：** `Boolean` * **默认值：** `false` * **描述：** 文件表单的 `multiple` 属性 是否允许选择多个文件 如果是 `false` files 里面最多只有一个文件 多的会自动删除 * **用法：** ```html ``` ### directory * **类型：** `Boolean` * **默认值：** `false` * **描述：** 文件表单的 `directory` 属性 是否是上传文件夹 [查看支持的浏览器](http://caniuse.com/#feat=input-file-directory) * **用法：** ```html ``` ### extensions * **类型：** `Array | String | RegExp` * **默认值：** `undefined` * **描述：** 允许上传的文件后缀 * **用法：** ```html ``` ### size * **类型：** `Number` * **默认值：** `0` * **描述：** 允许上传的最大字节 * **用法：** ```html ``` ### timeout * **类型：** `Number` * **默认值：** `0` * **描述：** 上传超时时间毫秒 * **用法：** ```html ``` ### thread * **类型：** `Number` * **默认值：** `1` * **描述：** 同时并发上传的文件数量 线程数 需要`HTML5`支持 * **用法：** ```html ``` ### drop * **类型：** `Boolean | Element | CSS selector` * **默认值：** `false` * **描述：** 拖拽上传 如果设置成 `true` 则读取父组件作为容器 需要`HTML5`支持 * **用法：** ```html ``` ### drop-directory * **类型：** `Boolean` * **默认值：** `true` * **描述：** 是否开启拖拽目录 如果设置成 `false` 则过滤掉目录 * **用法：** ```html ``` *** ## 事件 ### @input * **参数：** * `files: Array` * **描述：** 文件被改变触发的方法 默认用于`v-model`绑定 * **用法：** ```html ``` ```js { data() { return { files: [] } }, methods: { updatetValue(value) { this.files = value } } } ``` ### @input-filter * **参数：** * `newFile: Object | undefined` `读写` * `oldFile: Object | undefined` `只读` * `prevent: Function` * **描述：** 添加，更新，移除 前过滤器 事件内不可使用 `update`, `add`, `remove`, `clear` 方法 事件内可修改 `newFile` 对象 * **用法：** ```html ``` ```js { data() { return { files: [] } }, methods: { inputFilter(newFile, oldFile, prevent) { if (newFile && !oldFile) { // 添加文件 // 过滤非图片文件 // 不会添加到 files 去 if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.file)) { return prevent() return } // 创建 `blob` 字段 用于缩略图预览 newFile.blob = '' let URL = window.URL || window.webkitURL if (URL && URL.createObjectURL) { newFile.blob = URL.createObjectURL(newFile.file) } } if (newFile && oldFile) { // 更新文件 // 增加版本号 if (!newFile.version) { newFile.version = 0 } newFile.version++ } if (!newFile && oldFile) { // 移除文件 // 拒绝删除文件 // return prevent() } } } } ``` ### @input-file * **参数：** * `newFile: Object | undefined` `读写` * `oldFile: Object | undefined` `只读` * **描述：** 添加，更新，移除 后 事件内可使用 `update`, `add`, `remove`, `clear` 方法 事件内不可修改 `newFile` 对象 事件内不可修改 `oldFile` 对象 * **用法：** ```html ``` ```js { data() { return { files: [] } }, methods: { inputFile(newFile, oldFile) { if (newFile && !oldFile) { // 添加文件 // 自动上传 if (!this.$refs.upload.active) { this.$refs.upload.active = true } } if (newFile && oldFile) { // 更新文件 // 上传进度 if (newFile.progress !== oldFile.progress) { console.log('progress', newFile.progress, newFile) } // 上传错误 if (newFile.error !== oldFile.error) { console.log('error', newFile.error, newFile) } // 上传成功 if (newFile.success !== oldFile.success) { console.log('success', newFile.success, newFile) } } if (!newFile && oldFile) { // 删除文件 // 自动删除 服务器上的文件 if (oldFile.success && oldFile.response.id) { // $.ajax({ // type: 'DELETE', // url: '/file/delete?id=' + oldFile.response.id, // }); } } } } } ``` *** ## Methods 方法 ### get * **参数：** * `id: Object | String` 文件对象 | 文件id * **返回值：** `Object | Boolean` 存在返回文件对象否则返回`false` * **描述：** 使用`id`获得某个文件对象 ### add * **参数：** * `files: Object | Array | window.File` 文件对象 | 文件数组(多个) | window.File 对象 * `start: Boolean` 是否从开始位置插入 * **返回值：** `Object | Array | Boolean` 传入的是数组返回数组否则对象或`false` * **描述：** 添加一个或多个文件 * **用法：** ```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 * **参数：** * `id: Object | String` 文件对象 | 文件id * `data: Object` 更新的数据对象 * **返回值：** `Object | Boolean` 成功返回`newFile` 失败返回 `false` * **描述：** 更新某个文件对象 * **用法：** ```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 * **参数：** * `id: Object | String` 文件对象 | 文件id * **返回值：** `Object | Boolean` 成功返回 `oldFile` 失败返回 `false` * **描述：** 移除某个文件对象 * **用法：** ```html
  • {{file.name}}
``` ```js { data() { return { files: [] } }, methods: { remove(file) { this.$refs.upload.remove(file) } } } ``` ### clear * **返回值：** `Boolean` 总是返回 `true` * **用法：** 清空文件列表 *** ## 组件 Data ### features * **类型：** `Object` * **只读：** `true` * **默认值：** `{html5: true, directory: false, drag: false}` * **描述：** 用于判断浏览器支持的特性 * **用法：** ```html 支持拖拽上传 支持文件夹上传 支持HTML5 ``` ### active * **类型：** `Boolean` * **只读：** `false` * **默认值：** `false` * **描述：** 激活或停止上传 * **用法：** ```html 开始上传 停止上传 ``` ### dropActive * **类型：** `Boolean` * **只读：** `true` * **默认值：** `false` * **描述：** 是否正在拖拽 * **用法：** ```html 拖拽到这里上传 ``` 是否正在拖拽中 ### uploaded * **类型：** `Boolean` * **只读：** `true` * **默认值：** `true` * **描述：** 是否全部已上传 * **用法：** ```html 全部文件已上传完毕 ``` *** ## File > **文件对象在`input-filter`事件外修改请使用 `$refs.upload.update(file, data Object)`** ### id * **类型：** `String | Number` * **只读：** `true` * **默认值：** `Math.random().toString(36).substr(2)` * **描述：** 文件id ### size * **类型：** `Number` * **只读：** `false` * **默认值：** `-1` * **描述：** 文件大小 需要`HTML5`支持 ### name * **类型：** `String` * **只读：** `false` * **默认值：** `empty` * **描述：** 文件名 格式： `directory/filename.gif` `filename.gif` ### type * **类型：** `String` * **只读：** `false` * **默认值：** ` ` * **描述：** MIME类型 格式： `image/gif` `image/png` `text/html` 需要`HTML5`支持 ### active * **类型：** `Boolean` * **只读：** `false` * **默认值：** `false` * **描述：** 激活或终止上传 `true` = 上传 `false` = 停止 ### error * **类型：** `String` * **只读：** `false` * **默认值：** ` ` * **描述：** 上传失败错误代码 内置 `size`, `extension`, `timeout`, `abort`, `network`, `server`, `denied` ### success * **类型：** `Boolean` * **只读：** `false` * **默认值：** `false` * **描述：** 是否上传成功 ### putAction * **类型：** `String` * **只读：** `false` * **默认值：** `this.putAction` * **描述：** 自定义当前文件 `PUT` 地址 ### postAction * **类型：** `String` * **只读：** `false` * **默认值：** `this.postAction` * **描述：** 自定义当前文件 `POST` 地址 ### headers * **类型：** `Object` * **只读：** `false` * **默认值：** `this.headers` * **描述：** 自定义当前文件 `HTTP` Header ### data * **类型：** `Object` * **只读：** `false` * **默认值：** `this.data` * **描述：** 自定义当前文件 `body` 或 `query` 附加内容 ### timeout * **类型：** `Number` * **只读：** `false` * **默认值：** `0` * **描述：** 自定义当前单个文件的上传超时时间 ### response * **类型：** `Object | String` * **只读：** `false` * **默认值：** `{}` * **描述：** 响应的数据 ### progress * **类型：** `String` * **只读：** `true` * **默认值：** `0.00` * **描述：** 上传进度 ### speed * **类型：** `Number` * **只读：** `true` * **默认值：** `0` * **描述：** 每秒的上传速度 ### xhr * **类型：** `XMLHttpRequest` * **只读：** `true` * **默认值：** `undefined` * **描述：** `HTML5` 上传 `XMLHttpRequest` 对象 ### iframe * **类型：** `Element` * **只读：** `true` * **默认值：** `undefined` * **描述：** `HTML4` 上传 `iframe` 元素