现在前端基本不是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上传多图片且携带参数，批量而不是一张一张的解决方案》

版权声明：本文为helena000原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/helena000/p/11272200.html