在使用MultipartFile接收上傳的文件時，一般會有接收其他請求參數的需求
- 當請求參數過多時，通常情況下會將請求參數封裝為
body上傳，文件用單獨的 MultipartFile 接收，但是這樣寫后端一直無法接收成功
問題
@PostMapping("/save")
public Result<?> pushMoment(HttpServletRequest request,
@RequestBody ContentVo contentVo,
@RequestParam(value = "contentParam") MultipartFile contentParam
//...
}
HTTP請求分為了消息頭和消息體，頭信息里面的Content-Type字段定義了消息體的請求格式，接口里面聲明 @RequestBody 的參數只能設置為 "Content-Type: application/json"，而 MultipartFile 參數只能設置為"Content-Type: multipart/form-data"，上述兩種格式並不是兼容的，那問題就來了，前端請求的時候 Content-Type 怎么設置，無論哪種格式都是錯的。
body最終不能和MultipartFile同時存在
解決方案
前端統一格式"Content-Type: multipart/form-data"，結構體在前端傳遞的時候統一轉成json字符串，后端接收以后用Gson轉成結構體
@PostMapping("/save")
public Result<?> pushMoment(@RequestPart MultipartFile fileUrl,@RequestParam(value = "contentParam") String contentParam ) {
log.info("拿到的文件---> ={}",fileUrl.getOriginalFilename());
Gson gson = new Gson();
ContentUpload contentUpload = gson.fromJson(contentParam, ContentUpload.class);
}
<body>
<input id="file" type="file"/>
<br>
<button>post 請求</button>
<script>
const btns = document.querySelectorAll("button");
let contentUpload = {
//....
};
let a = JSON.stringify(contentUpload)//將對象轉為 JSON
console.log(a);
btns[0].onclick = () => {
const file = document.getElementById("file").files[0];
console.log(file)
let fileUrl = new FormData();
fileUrl.append("fileUrl", file, file.name);
axios({
//請求類型
method: 'POST',
//URL
url: 'http://localhost:9999/content/save',
headers: {
"Content-Type": "multipart/form-data;boundary=" + new Date().getTime()
},
data: fileUrl,//上傳的文件
params: {
contentParam: a
}
}).then(res => {
console.log(res)
})
}
</script>
</body>