axiosCurrent request is not a multipart request
时间: 2025-01-06 12:42:57 浏览: 4
### 解析 Axios 'current request is not a multipart request' 错误
当遇到 `Current request is not a multipart request` 的错误提示时,表明服务器期待接收到一个多部分表单数据(multipart/form-data),而实际接收到的数据格式不符合预期。此问题常见于通过 Axios 发送带有文件的 POST 请求场景。
#### 使用 FormData 类构建请求体
为了确保请求能够被正确识别为多部分表单数据,在发送文件之前应该创建一个新的 `FormData` 对象来装载要上传的文件和其他附加参数:
```javascript
const formData = new FormData();
formData.append('file', fileInput.files[0]); // 添加文件到表单对象中
// 如果有额外字段可以继续append
formData.append('additionalField', 'value');
```
#### 设置 Content-Type 头部信息
虽然指定了 `'Content-Type': 'multipart/form-data'`,但在某些情况下手动指定可能会引发边界字符串缺失等问题[^3]。因此建议让浏览器自动处理头部信息而不显式设定它:
```javascript
return axios.post('/uploadFile',
formData,
{
headers: {
// 不需要设置 content type, 浏览器会自动处理
// 'Content-Type': 'multipart/form-data'
}
});
```
#### 完整示例代码
下面是一个完整的例子展示了如何利用上述方法实现文件上传功能并避免出现 `Current request is not a multipart request` 错误:
```javascript
function uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
return axios({
url: '/uploadFile',
method: 'post',
data: formData,
onUploadProgress(progressEvent){
console.log(Math.round((progressEvent.loaded * 100) / progressEvent.total));
},
headers:{
// 让浏览器自行决定合适的boundary值
}
}).then(response => response.data);
}
```
阅读全文