最近公司要求要做一個(gè)批量上傳文件的功能，以往做的導(dǎo)入Excel表格、上傳圖片都是上傳一個(gè)文件的，此次在開發(fā)的過(guò)程中著實(shí)讓我犯了難，尤其是前后端對(duì)接的時(shí)候，這里做個(gè)記錄。

一、后端接口

后端接口是這樣的，跟單個(gè)文件上傳相比就是將MultipartFile類型的數(shù)據(jù)變成了集合，這個(gè)MultipartFile還是在FormData中上傳，這里的“yqId”和“depId”也是在FormData中。

//批量上傳文件
@PostMapping("/batchUploadContract")
public Result batchUploadContract(@RequestParam("yqId") String yqId, 
                                  @RequestParam("depId") String depId, 
                                  @RequestParam("fileList") List<MultipartFile> fileList) {
    Result result = null;
    try {
        SysUserHetongDto params = new SysUserHetongDto();
        params.setYqId(yqId);
        params.setDepId(depId);
        result = Result.OK("上傳成功！", userHetongService.batchUploadContract(params, fileList));
    } catch (Exception e) {
        e.printStackTrace();

        result = Result.error("上傳失敗！" + e.getMessage());
    } finally {
        return result;
    }
}

二、前端對(duì)接

前端框架是“Ant Design”，一開始也考慮用它的上傳組件，可能是對(duì)組件不熟悉的原因，在對(duì)接的過(guò)程中，總是遇到各種各樣的問(wèn)題，要么就是會(huì)調(diào)用多次接口（選中幾個(gè)文件就調(diào)幾次那種），要么就傳遞的數(shù)據(jù)不是binary類型的，不能被后端接收，折騰了好久都沒(méi)有對(duì)接成功。

最后決定在vue中使用input進(jìn)行多文件上傳

“template”標(biāo)簽中

<template>
	<div>
      <input type="file" @change="uploadFile" multiple="multiple">
    </div>
</template>

“script”標(biāo)簽中

<script>
import axios from 'axios'
export default { 
	methods: {
	    uploadFile(event) {  //事件名稱可以自己取，我這里是event
	      // console.log("uploadFile event", event)
	      console.log("uploadFile files", event.target.files)
	      // console.log("uploadFile typeof", typeof event.target.files[0])
	      let files = event.target.files;  //input上傳的文件一般是在target.files下，是一個(gè)File類型的集合
	      const headers = {
	        'X-Access-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTQ0MTgyNjEsInVzZXJuYW1lIjoi5Y2h5LiA6L2mIn0.J0l4AbdlnZKszqk8QDRCGbLrR6vfNynkz1K2mWJgX4s',  //請(qǐng)求token，我這里的名稱是X-Access-Token
	        'Content-Type': 'multipart/form-data',  // 文件上傳類型
	      };
	      let url = 'http://127.0.0.1:8080/jeecg-boot/hetong/batchUploadContract';
	      let form = new FormData();  //FormData中的參數(shù)
	      form.append('depId', '74f801bcffe745c3a20caad20985db9f');
	      form.append('yqId', 'ca6d914f8b0840928f787f4073ccc023');
	
	      //上傳集合類型的文件，后端以List<MultipartFile>接收
	      for(let i = 0; i < files.length; i++) {
	        form.append('fileList', files[i]);
	      }
	
	      //調(diào)用后端接口
	      axios.post(url, form, {headers:headers}).then((res) => {
	        //console.log("uploadFile res", res)
	        // if(res.data.code == 200) {
	        //   console.log(res.data.message)
	        // }
	      })
	      return false;
	    }
	  },
  	},
}
</script>

三、測(cè)試

選擇文件上傳后，查看前端控制臺(tái)

這兩個(gè)是選中上傳的文件，時(shí)File類型的，但我們要的是binary類型的

在上傳文件方法中循環(huán)添加到FormData中就變成了binary類型的

查看Network，可以看到File類型的文件已經(jīng)轉(zhuǎn)化為binary類型了

就是會(huì)出現(xiàn)選中多少個(gè)文件，就會(huì)有多少個(gè)同名的文件參數(shù)（我這里是fileList）的情況，不過(guò)這個(gè)不影響，選中了幾個(gè)文件后端就會(huì)接收到幾個(gè)文件。

后端debug

可以看到兩個(gè)文件已經(jīng)傳了進(jìn)來(lái)，總算成功了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-732817.html

到了這里，關(guān)于批量上傳文件，以input上傳文件，后端以List＜MultipartFile＞類型接收的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！