VUE的formdata传集合List到Springboot后台

最新推荐文章于 2024-07-10 12:22:45 发布

搬砖盖楼

最新推荐文章于 2024-07-10 12:22:45 发布

阅读量5.3k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_26182739/article/details/103016297

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue中进行formdata的拼接

// data中定义的list
brandList: [{
        id: null,
        logoFile: null, // 文件上传
        backFile: null // 文件上传
      }],

// 方法中进行formdata的拼接
save() {
      const formdata = new FormData()
      this.brandList.forEach((item, index) => {
        formdata.append('list[' + index + '].id', item.id)
        formdata.append('list[' + index + '].logoFile', item.logoFile.raw, item.logoFile.name)
        formdata.append('list[' + index + '].backFile', item.backFile.raw, item.backFile.name)
      })
      api.save(formdata)
        .then(response => {
          this.$message.success('保存成功！')
        })
    }

springboot后台接收

@Data
public class BrandList implements Serializable{
    private static final long serialVersionUID = -8300392386535388817L;

    private List<BrandVO> list;
}


@Data
public class BrandVO implements Serializable{

    private Long id;

    private MultipartFile logoFile;

    private MultipartFile backFile;
}

    


@ApiOperation(value = "批量新增数据")
@PostMapping(value = "/v1/brands")
public Response add(BrandList voList){
    List<brand> list = new ArrayList<>();
    Brand brand = null;
        for(BrandVO vo:voList.getList()){
            brand = new Brand();
            brand.setId(vo.getId());
            // 文件上传
            MultipartFile file = null;
            file = vo.getLogoFile();
            brand.setLogoUrl(fileUtil.getUrl(file));

            file = vo.getBackFile();
            brand.setBackUrl(fileUtil.getUrl(file));
            list.add(brand);
        }
        this.api.saveBatch(list);
        return ResponseUtil.returnSuccess();
    }