@RequestPart注解:用于处理multipart/form-data请求的一部分,通常用于文件上传或者处理表单中的字段。
java后端举例:
@PostMapping("/fileTest")public AjaxResult fileTest(@RequestPart("file") MultipartFile file,@RequestPart("dept") Dept dept){String originalFilename = file.getOriginalFilename();System.out.println(originalFilename);System.out.println(dept);return success();}
Postman测试接口传参格式:
注意事项: dept类型的格式是application/json
前端使用的是vue3
async function uploadDept(){const formData = new FormData();
//文件类型formData.append('file',queryParamsFile.value.file);
//获取值方式一:let dept = JSON.stringify({...form.value})
//获取值方式二:用于测试const deptInfo = JSON.stringify({"deptId": 33,"deptName": "财务部","leader": null,"phone": null,"email": null,});
//添加blob类型formData.append('dept', new Blob([dept], { type: "application/json" }));
// formData.append('dept', new Blob([deptInfo],{type : "application/json"});//调用接口await uploadFileTest(formData).then(response => {proxy.$modal.msgSuccess("成功");});}
调用后端接口配置
export const uploadFileTest = (data)=>{return axios({headers: {'Content-Type': 'multipart/form-data'},url:'/dept/fileTest',method:'post',//忽略contentTypedata: data,//取消序列化contentType: false,// dataType: 'json',//设置请求头processData: false})
}
注意:有可能有问题的地方
在axios 的配置文件中,注意下面这个,把config.headers['Content-Type'] 这行注释掉
request.interceptors.request.use(config => {
if(config && config.headers){
//如果有这一行,注释下再试试
// config.headers['Content-Type'] = 'application/json;charset=utf-8';
}