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

最新推荐文章于 2025-01-03 17:35:33 发布

原创

最新推荐文章于 2025-01-03 17:35:33 发布 · 4.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#list #vue.js #数据结构

本文讲述了在项目中实现批量文件上传的过程，包括后端接口的设计（接受List类型文件）、前端使用AntDesign和Vue的解决方案，以及测试中的注意事项。

批量上传文件，以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);
        res