有一移动端项目，使用的vant-ui。可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能。
于是乎：在https://www.npmjs.com/查找发现找到 vue-upload-component 组件，功能基本都有，评价也不错，目前有1500多个star。
因为是国人开发的，所有比较完善的中文文档。
使用：
1.安装：
npm install vue-upload-component --save
2.在main.js中全局引入
const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)
3.测试例子：test.vue
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-upload-component Test</title> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-upload-component"></script> </head> <body> <div id="app"> <ul> <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li> </ul> <file-upload ref="upload" v-model="files" post-action="/post.method" put-action="/put.method" @input-file="inputFile" @input-filter="inputFilter" > 上传文件 </file-upload> <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">开始上传</button> <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">停止上传</button> </div> <script> new Vue({ el: '#app', data: function () { return { files: [] } }, components: { FileUpload: VueUploadComponent }, methods: { /** * Has changed * @param Object|undefined newFile 只读 * @param Object|undefined oldFile 只读 * @return undefined */ inputFile: function (newFile, oldFile) { if (newFile && oldFile && !newFile.active && oldFile.active) { // 获得相应数据 console.log('response', newFile.response) if (newFile.xhr) { // 获得响应状态码 console.log('status', newFile.xhr.status) } } }, /** * Pretreatment * @param Object|undefined newFile 读写 * @param Object|undefined oldFile 只读 * @param Function prevent 阻止回调 * @return undefined */ inputFilter: function (newFile, oldFile, prevent) { if (newFile && !oldFile) { // 过滤不是图片后缀的文件 if (!/.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) { return prevent() } } // 创建 blob 字段 用于图片预览 newFile.blob = '' let URL = window.URL || window.webkitURL if (URL && URL.createObjectURL) { newFile.blob = URL.createObjectURL(newFile.file) } } } }); </script> </body> </html>
说明：如果不想用提供的post-action或put-action方法，可以使用自定义的上传方法custom-action
该custom-action方法 优先级高于 put-action, post-action