React中Axios上传文件时FormData.append无效问题求助

我来帮你分析一下问题根源，以及对应的修复方案：

问题出在哪？ #

你现在的代码里，把包含FormData的普通对象allData直接传给了Axios的post方法——但Axios默认会把JavaScript对象序列化为JSON格式发送请求，而JSON根本无法处理File和FormData这类特殊对象。而且你把FormData嵌套在了files数组里，序列化后文件信息直接丢失，最终后端收到的自然是空对象{}。

正确的修复方案 #

要成功发送文件和关联数据，你需要直接用FormData承载所有请求内容，让Axios以multipart/form-data格式发送请求（这是上传文件的标准格式）。下面给你两种可行的实现方式：

方式一：将非文件数据序列化后放入FormData #

适合后端能解析JSON字符串的场景，代码更简洁：

uploadFile(event) { 
  const file = event.target.files[0]; 
  const formData = new FormData(); 

  // 添加项目ID
  formData.append('project_id', 1);

  // 准备files数组：注意这里直接传文件名，实际文件单独追加
  const files = [ 
    { name: "n1", description: "d1", file_name: file.name, business_file_type: 1 } 
  ];
  // 将数组转成JSON字符串放入FormData，后端接收后再解析
  formData.append('files', JSON.stringify(files));

  // 单独添加实际的文件对象
  formData.append('file', file);

  // 发送请求：直接传formData，Axios会自动处理Content-Type
  API.post('project/files/upload', formData) 
    .then(({ data }) => { 
      console.log("success", data); 
    }) 
    .catch((err) => { 
      console.log("AXIOS ERROR: ", err); 
    }) 
}

方式二：按后端期望的结构逐个追加字段 #

如果后端需要直接接收嵌套的数组结构，可以通过索引逐个追加字段：

uploadFile(event) { 
  const file = event.target.files[0]; 
  const formData = new FormData(); 

  // 添加项目ID
  formData.append('project_id', 1);

  // 按数组索引追加files的每个字段
  formData.append('files[0][name]', "n1");
  formData.append('files[0][description]', "d1");
  formData.append('files[0][file]', file);
  formData.append('files[0][business_file_type]', 1);

  API.post('project/files/upload', formData) 
    .then(({ data }) => { 
      console.log("success", data); 
    }) 
    .catch((err) => { 
      console.log("AXIOS ERROR: ", err); 
    }) 
}

额外提醒 #

• 绝对不要把FormData嵌套在普通对象里发送，必须直接将FormData作为Axiospost的第二个参数。
• Axios在发送FormData时会自动设置正确的Content-Type（包含boundary），所以不需要手动设置这个header，手动设置反而可能导致解析错误。
• 确保后端已经配置了处理multipart/form-data请求的中间件，比如Node.js用multer，Spring Boot用MultipartFile。

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