摘要：
现在，前端基本上要么是vue技术堆栈，要么是react技术堆栈。最常用的Vue技术堆栈是元素ui的ui框架。在项目中，我们经常需要批量上传元素ui。我们的同事还展示了许多属性和方法供我们使用。如果已验证携带的参数，则可以使用表单验证。
现在前端基本不是vue技术栈就是react技术栈。
vue技术栈最常用的就是element-ui的ui框架了。
在项目中，我们经常会碰到这种需求：批量上传文件
element-ui 确实也为我们提供了<el-upload>这样的组件，同事也暴露了很多的属性和方法供我们使用。
但是很多人却碰到了这样的问题：项目需求是批量上传，但是为什么自己上传的时候，也成功了，但是却是一张一张上传的，这种上传方式有时候并不违背我们的需求，但有时又不是我们需要的。那么，怎么解决批量上传并携带参数呢，我这里写了一个demo，
可供大家参考：
1 <template> 2 <div> 3 <el-form> 4 <el-form-item> 5 <el-upload 6 ref="upload" 7 action="/as" 8 multiple 9 :http-request="handleUpload" 10 :auto-upload="false" 11 :limit="20"> 12 <el-button size="small" type="primary">点击上传</el-button> 13 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> 14 </el-upload> 15 </el-form-item> 16 <el-form-item> 17 <el-button type="primary" @click="handlePush">发布</el-button> 18 </el-form-item> 19 </el-form> 20 21 </div> 22 </template> 23 <script> 24 import axios from 'axios' 25 import { mapGetters } from 'vuex' 26 export default{ 27 data() { 28 return { 29 files:[] 30 }; 31 }, 32 computed:{ 33 ...mapGetters([ 34 'taxno', 35 'username' 36 ]) 37 }, 38 methods: { 39 handleUpload(raw){ 40 this.files.push(raw.file); 41 }, 42 async handlePush(){ 43 this.$refs.upload.submit() // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件 44 let fd = new FormData(); 45 fd.append('operator',this.username) 46 fd.append('reimment',"倪楚楚") 47 fd.append('deptname',"技术部") 48 fd.append('taxno',this.taxno) 49 this.files.forEach(function (file) { 50 fd.append('file', file, file.name); // 因为要上传多个文件，所以需要遍历一下才行 51 //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object 52 }) 53 axios.post(process.env.BASE_API+'/file/moreFileUpload',fd).then(res=>{ 54 if(res.data.status==='OK'){ 55 console.log(res) 56 } 57 }) 58 } 59 } 60 } 61 </script>
因为<el-upload>的action属性是必须的，所以如果不用默认上传，这里随便设置一个字符串就可以了。
如果对携带的参数做校验，可以用表单校验。当校验通过了再调上传的接口就可以了。
希望这篇文章对你有所帮助！
转载请注明出处：砌墙的砖 博客园 2019-07-30 《vue中el-upload上传多图片且携带参数，批量而不是一张一张的解决方案》