Vue el-upload插件上传批量文件

el-upload 上传多个文件的时候。是一个文件接着一个上传的。但是如果说我们想一次性上传所有的文件，然后后台统一处理呢。那我们就要想着怎么做。下面列出来:

第一步。引用el-upload插件

    上传文件

:action="getUploadAction" ：这个东西你甚至可以填个"/"就行。

multiple：这个属性是要的。注意了这个是控制能传多个文件。

:limit="10"：这个是控制了上传文件的个数

:auto-upload="false" 这个很重要，这个控制

this.$refs.upload.submit(); 走不走:action="getUploadAction"的这个属性。

如果没有这个属性。后台点击上传文件的按钮会直接走action的后台接口

---

第二步 我是后续加了个按钮来实现文件的上传的

{{$t('comm.import')}}

---

第三步 前台传给后台的时候。特别要注意。我们是要用form格式去传过去的。具体的写法我贴在后面：

let upData = new FormData();
upData.append("JsonStr", JSON.stringify(DTO))

for(let i=0;i 
  
里面的定义。jsonStr是传到后台的json格式的字符串。file是具体的文件。contentType这个是我用来逻辑处理的，你们可以不填。
 
  
这个我要说明一下。网上好多人说要用:http-request="httpRequest"这个属性里的httpRequest的来拼接文件。但是我具体使用下来，发现这个写法，如果上传多次，文件是会被多次放进去的。也就是第一次是五个文件的话，第二次直接变成十个文件。
 
  
剩下来就是
 
  
axios.post(url, data)
 
  
网上的写法就行。但是如果你的axios的底层是定义过的话。
 
  
那你要去找
 
  
axios.interceptors.request.use(config => {
 
  
})
 
  
config.headers = {
  'Content-Type': contentType,
  'Accept-Language': store.state.language
}
 
  
把这里面的context-Type 变成multipart/form-data；
 
  
config.data也要注意。直接传过去就行。
 
  
 
  
第四步 后台接收。好多人都没写到这一步
 
  
  @RequestParam(value = "file", required = false)List multipartFiles,String JsonStr
 
  
接收的参数是这个玩意。然后直接去解析就行