Reactjs Axios post请求未将内容类型设置为多部分/表单数据

我正在尝试从react向cloudinary上传图像，我无法使用axios发出post请求。代码如下：

const onSubmit=async（数据）=>{
const{files}=document.querySelector（'input[type=“file”]”）；
控制台日志（数据）；
if（data.files！==未定义的| | data.files！==null | | data.files！==“”）{
设置加载（真）；
const formData=new formData（）；
formData.append（“文件”，文件[0]）；
formData.append（“上传预设”，cloudinary预设）；
常量选项={
标题：{“内容类型”：“多部分/表单数据”}，
数据：formData，
};
const res=等待axios.post(
`https://api.cloudinary.com/v1_1/${cloudinary\u id}/image/upload`，
选择权
);
const img=wait res.json（）；
const imgUrl=img.secure\u url；
data.thumboil=imgUrl；
console.log（data.缩略图）；
控制台日志（res）；
设置加载（假）；
}否则{
data.缩略图=”；
}
};

您得到的是

应用程序/json

类型，因为您正在将JS对象

选项

传递给Axios post调用中的数据部分

应在

的第三个参数中设置标题。post

方法：

以下是已修改的代码，其中删除了

选项

变量：

const onSubmit=async（数据）=>{
const{files}=document.querySelector（'input[type=“file”]”）；
控制台日志（数据）；
if（data.files！==未定义的| | data.files！==null | | data.files！==“”）{
设置加载（真）；
const formData=new formData（）；
append（'file'，files[0]）；
formData.append（'upload\u preset'，cloudinary\u preset）；
const res=等待axios.post(
`https://api.cloudinary.com/v1_1/${cloudinary\u id}/image/upload`，
formData，
{
标题：{“内容类型”：“多部分/表单数据”}
}
);
const img=wait res.json（）；
const imgUrl=img.secure\u url；
data.thumboil=imgUrl；
console.log（data.缩略图）；
控制台日志（res）；
设置加载（假）；
}否则{
data.thumbnail=''；
}
};

Axios文档：

post（url[，数据[，配置]]）

注意

---

我认为，当您将FormData类型的数据添加到body时，axios会隐式地将内容类型转换为多部分/表单数据。

结果表明axios返回了一个承诺，因此我需要使用then&catch使其工作，以下是我的工作解决方案：

const onSubmit=async（数据，e）=>{
const{files}=document.querySelector（'input[type=“file”]”）；
控制台日志（数据）；
if（data.files！==未定义的| | data.files！==null | | data.files！==“”）{
设置加载（真）；
const formData=new formData（）；
formData.append（“文件”，文件[0]）；
formData.append（“上传预设”，cloudinary预设）；
等待axios
.邮政(
`https://api.cloudinary.com/v1_1/${cloudinary\u id}/image/upload`，
formData
)
。然后（（结果）=>{
const img=结果数据；
const imgUrl=img.secure\u url；
data.thumboil=imgUrl；
设置加载（假）；
})
.catch（（err）=>console.log（err））；
}否则{
data.缩略图=”；
}
试一试{
设置加载（真）；
等待authAxios
.post（“/api/project/”，数据）
。然后（（res）=>{
console.log（res.data）；
})
.catch（（e）=>{
控制台日志（e）；
});
设置加载（假）；
重置（）；
}捕捉（错误）{
控制台日志（err）；
}
};我明白了，我的逻辑就是问题所在！事实证明，当使用axios时，它会返回一个承诺，因此我需要使用then&catch。你说得对，axios会自动将内容视为多部分/表单数据，因为当我删除标题配置时，我仍然能够发出post请求！下面共享的代码。是的，它确实返回承诺，但您不需要使用then/catch。您也可以像以前一样使用
wait
await
用于处理承诺：），请使用
await
再试一次，看看FormData是否是您唯一的问题。