前端同时上传文件和对象

问题：前端如何将文件和对象作为参数同时传到后台呢？

前端操作：

FormData对象是为序列化表以及创建与表单格式相同的数据提供便利。可以通过formdata添加数据。它是以key value形式的键值对。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 通常可以用于声音、视频等多媒体文件的存储。

// 先new一个FormData对象
let formData = new FormData();

// 用户对象
let parameter = {id: 1, name: 'xiaoming'};


// blob转file：将 JSON 字符串转化为 Blob 对象
// application/json 默认情况下编码为UTF-8 接收正在处理JSON格式的数据
const blob = new Blob([JSON.stringify(parameter)], 
                      {type: 'application/json;charset=utf-8'});


formData.append('file', file.raw);
formData.append('dto', blob);

this.fileParameter = formData;

// 通过添加完时候之后调用后端接口传参
const res = await saveFile(this.fileParameter);
if (res.code == 200) {
    this.$message({ message: res.msg), type: 'success'});
}

file.raw很关键，如果没有加raw的话，传到后台的file为null。

// js文件
export const saveFile = data => request({
    url: `/test/saveFile`,
    method: 'post',
    data
})

后端操作：

    // Controller层
    @PostMapping("/saveFile")
    public AjaxResult saveFile(@RequestPart  @Validated StudentDto dto, @RequestParam(required = false, value = "file") MultipartFile file) {
        try {
            fileService.saveFile(dto, file);
            return AjaxResult.success();
        } catch (Exception e) {
            log.info("保存文件失败, " + e.getMessage());
            return AjaxResult.error();
        }
    }

使用Postman测试接口：

 至此操作就完毕了。