如何在包含json对象请求体和多部分表单数据(MP4)的post请求中使用Axios.post()

Question

嗨，我想知道如何发送一个包含json对象作为请求主体的单个axios post请求，以及多部分表单数据(Mp4文件(
在我的示例中，我希望发送"详细信息"one_answers"文件"。我已经尝试将详细信息和文件作为第二个和第三个参数发送到axios.post((方法，但据我所知，axios.post只接受2个参数。我还尝试将详细信息和文件附加到表单数据中，但这也不起作用。

如果我把这些分成两个单独的post调用，效果很好，但我的应用程序要求这些调用一起发生。

我在春季控制台中收到以下错误：[org.springframework.web.HttpMediaTypeNotSupportedException：不支持内容类型"多部分/表单数据；边界=----WebKitFormBoundaryqKyZ0R2SyFeDNCVp；字符集=UTF-8"]

以下是我的web开发工具控制台中的错误：xhr.js:210 POSThttp://localhost:9191/api/123/file/upload415

我真的很感激的任何建议

const FileUpload = () => {
const [file, setFile]= useState(null)
const[details, setDetails] = useState({consent:false, 
idConfirmed:false, 
label:"", 
roundId:""})
const changeHandler=(e)=>{

setFile(e.target.files[0]);
setDetails(prevDetails=>({
...prevDetails,
consent:true,
idConfirmed:true,
label:"test_Label"
}));
};
const handleSubmission=(e)=>{
e.preventDefault();
const data = new FormData();
data.append("file", file)
data.append("file", details)
console.log("Data: ", data)

axios.post(`${process.env.REACT_APP_URL_NEW_ROUND_VID}/123/file/upload`, data,
{
headers:{
"Content-Type":"multipart/form-data"
}
})
.then(res=>{
console.log("Data: ",res.data)
console.log("success")
})

.catch((e)=>{
console.log("Error", e)
})
//})
};

这是我在Springboot的休息终点：

@PostMapping(
path = "{patientId}/file/upload",
consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public void addWardRound(@PathVariable("patientId") String patientId,
@RequestParam("file") MultipartFile file,
@RequestBody WardRequest wardRequest){
WardRoundService.isFileEmpty(file);
WardRound round = service.saveRound(wardRequest);
String roundId = round.getRoundId();
service.uploadVid(patientId, roundId, file);
}

Answer 1

您可以字符串化并发送JSON数据。但是通过使用这种方法，您需要在服务器中解析它！。可能很困难

最好的方法是将其拆分为2个API

通过使用promise合并两个API，您可以在UI中合并两个API请求。全部的https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

const promise1 = axios.get(URL1);
const promise2 = axios.post(URL2, data);
Promise.all([promise1, promise2]).then(function(values) {
console.log(values);
});

或者如果您需要使用第一个API 的结果

然后在第一个API自身的响应中调用第二个API