使用Axios上传含文件的表单数据失败问题求助

我来帮你梳理下这个文件上传失败的核心问题，咱们一步步调整就能解决：

1. 请求体结构错误：所有数据要合并到同一个FormData #

你现在把formData和image拆成两个独立属性传给Axios请求体，但文件上传的规范是表单字段和文件必须放在同一个FormData对象里。这种拆分的结构会让Axios错误地把数据序列化为JSON，服务器根本无法解析multipart格式的内容。

修正后的FormData创建代码： #

let formData = new FormData();
// 添加普通表单字段
formData.append('title', values.title);
formData.append('description', values.description);
formData.append('amount', values.amount);
// 直接把文件添加到同一个FormData中
formData.append('image', image); // 确保image是合法的File对象

2. Axios请求参数传递错误 #

你当前的Axios调用把{ form: formData, image: image }作为请求体，这完全不符合文件上传的要求。正确的做法是直接把合并后的FormData对象作为请求体参数。

修正后的Axios调用： #

axios.post(ENDPOINT, formData, getAuthorizationHeader());

3. Content-Type设置优化 #

虽然你把Content-Type设为undefined，但更稳妥的方式是完全不手动设置这个头——当Axios检测到请求体是FormData时，会自动生成正确的multipart/form-data请求头，还会带上浏览器自动生成的boundary（这是文件上传的关键，手动设置很容易漏掉导致解析失败）。

修正后的getAuthorizationHeader函数： #

function getAuthorizationHeader() {
  return {
    headers: {
      'Authorization': '你的授权Token内容' // 保留原有的授权逻辑
      // 删掉Content-Type配置，让Axios自动处理
    }
  };
}

额外检查点 #

• 确认image是合法的File对象（可以用console.log(image)查看，应该能看到name、size等File属性）；
• 核对后端接口接收的字段名（比如image、title）和你FormData里的append名称完全一致；
• 确保后端支持multipart/form-data格式的请求解析。

按照上面的步骤调整后，应该就能正常完成表单和文件的上传了。

内容的提问来源于stack exchange，提问作者Arian