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

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

第一步。引用el-upload插件

<el-upload
    ref="upload"
    :action="getUploadAction"
    :on-success="uploadSuccess"
    :on-error="uploadError"
    :before-remove="beforeRemove"
    multiple
    :limit="10"
    :headers="getToken"
    :on-exceed="handleExceed"
    :on-change="handleChange"
    :auto-upload="false"
    :http-request="httpRequest"
    :file-list="fileList">
    <el-button size="small" type="primary">上传文件</el-button>
</el-upload>

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

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

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

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

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

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

---

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

<el-button size="small" type="primary" @click="submitImport">{{$t('comm.import')}}</el-button>

---

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

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

for(let i=0;i<this.$refs.upload.uploadFiles.length;i++){
    upData.append("file",this.$refs.upload.uploadFiles[i].raw);
}
upData.append('contentType',"multipart/form-data;")

里面的定义。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<MultipartFile> multipartFiles,String JsonStr

接收的参数是这个玩意。然后直接去解析就行