批量上传文件，以input上传文件，后端以List＜MultipartFile＞类型接收

川长思鸟来 2024-03-03 08:02 26阅读 0赞

#### 批量上传文件，以input上传文件，后端以List类型接收 ####

*  一、后端接口
 *  二、前端对接
 *  三、测试

最近公司要求要做一个批量上传文件的功能，以往做的导入Excel表格、上传图片都是上传一个文件的，此次在开发的过程中着实让我犯了难，尤其是前后端对接的时候，这里做个记录。

## 一、后端接口 ##

后端接口是这样的，跟单个文件上传相比就是将MultipartFile类型的数据变成了集合，这个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;
        }
    }

## 二、前端对接 ##

前端框架是“Ant Design”，一开始也考虑用它的上传组件，可能是对组件不熟悉的原因，在对接的过程中，总是遇到各种各样的问题，要么就是会调用多次接口（选中几个文件就调几次那种），要么就传递的数据不是binary类型的，不能被后端接收，折腾了好久都没有对接成功。

最后决定在vue中使用input进行多文件上传

“template”标签中

“script”标签中

## 三、测试 ##

选择文件上传后，查看前端控制台

![在这里插入图片描述][d4b1f9ca2df542148535b4a772535334.png]

这两个是选中上传的文件，时File类型的，但我们要的是binary类型的

在上传文件方法中循环添加到FormData中就变成了binary类型的

![在这里插入图片描述][57868c760a7a483ab1d06459cbfd14a5.png]

查看Network，可以看到File类型的文件已经转化为binary类型了

![在这里插入图片描述][8f8cdf9d9f654bcb882788b785a4c2d2.png]

就是会出现选中多少个文件，就会有多少个同名的文件参数（我这里是fileList）的情况，不过这个不影响，选中了几个文件后端就会接收到几个文件。

后端debug

![在这里插入图片描述][69d1313b53484552bf1f3730e2fb0a17.png]

可以看到两个文件已经传了进来，总算成功了。

[d4b1f9ca2df542148535b4a772535334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/8737dab0f5824934a36d6cf487827c67.png
[57868c760a7a483ab1d06459cbfd14a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/3194fff6d2944ac9a2ee852aa2767878.png
[8f8cdf9d9f654bcb882788b785a4c2d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/60919c6b038543aa82397a25b19d1fca.png
[69d1313b53484552bf1f3730e2fb0a17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/a6826b4f4da448b69d9133b4d39c1bc5.png