前端同时传递文件数据+非文件数据，前后端解决方案

之前录制视频《文件上传组件》的时候有位观众提了个问题，如果我没有理解错的话，应该就是前后同时传递文件数据 + 非文件数据，前后端数据该如何接收，这里我给出我自己的解决方案

tip:下文在编写前端代码的时候，用到了这篇文章写《文件组件封装》的组件

1. 封装对象

前端

<script setup lang="ts">
const fileList = ref<Array<UploadUserFile>>();const upload3 = () => {// 上传单张图片const file = fileList.value[0];// 将前端数据封装到FormData中const data = new FormData();// 非文件数据data.append("number", "0");data.append("clientMd5", file.name);// 文件数据data.append("partFile", file.raw);axios.post("/api_demo/file/upload3", data, {headers: {"Content-Type": "multipart/form-data"}});
};
</script><template><el-row><FileUpload v-model:fileList="fileList" /><el-button type="success" @click="upload3">upload3</el-button><el-button type="success" @click="upload4">upload4</el-button></el-row>
</template>

后端

entity：将要传递的非文件数据+文件数据封装到同一个对象

/*** 上传的文件切片*/
@Data
public class UploadPart {// 分片序号private Integer number;// 分片private MultipartFile partFile;// 原文件md5值(不是分片的md5)private String clientMd5;
}

接口

    @PostMapping("/upload3")public R upload3(@ModelAttribute UploadPart uploadPart) {return R.ok();}

结果

后端接受成功

在这里插入图片描述

2. RequestParam单独获取

前端代码不变，后端接口修改

@PostMapping("/upload3")public R upload3(@RequestParam("partFile") MultipartFile file,@RequestParam("number") String uid,@RequestParam("clientMd5") String clientMd5) {return R.ok();}