如何避免API传输数据丢失？ReactJS文件上传API数据为空问题

这个问题的核心在于JSON无法直接序列化FormData和File对象——当你用JSON.stringify(media)把包含这两种类型的数组转成JSON字符串时，它们会被转换成空对象{}，导致服务器接收不到有效数据。下面是具体的修复方案：

方案一：改用FormData传递所有请求数据（推荐） #

因为要上传文件，请求必须使用multipart/form-data格式，而不能用默认的JSON格式。我们可以把所有需要传递的数据（包括map_id和media数组的内容）都放进FormData里：

步骤1：调整前端存储的media结构 #

先修改handleUploadChange，不要提前创建FormData，直接把File对象和元数据存在数组里：

function handleUploadChange(e) {
  handleClose();
  const file = e.target.files[0];
  if (!file) {
    return;
  }
  // 只存必要的元数据和File对象，不提前创建FormData
  const obj = { 'id': id, 'type': 'image', 'file': file };
  setID(id + 1);
  setMedia([...media, obj]);
}

步骤2：重构addNew函数，用FormData发送请求 #

function addNew() {
  setProgressing(true);
  const formData = new FormData();
  
  // 添加map_id字段
  formData.append('map_id', props.data.id);
  
  // 遍历media数组，把每个项的字段和文件添加到FormData
  media.forEach((item, index) => {
    formData.append(`media[${index}][id]`, item.id);
    formData.append(`media[${index}][type]`, item.type);
    // 第三个参数是文件名，可选但建议加上
    formData.append(`media[${index}][file]`, item.file, item.file.name);
  });

  // 发送请求时指定Content-Type（Axios通常会自动检测，手动指定更稳妥）
  axios.post(uri + '/api/add', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(res => { props.updateStep(); })
  .catch(err => { 
    console.error('上传失败:', err);
    // 这里可以添加错误提示逻辑
  });
}

服务器端注意事项 #

如果你的后端用Node.js/Express，需要用multer中间件来解析multipart/form-data格式的请求，确保能正确接收文件和数组数据。

为什么原来的方案会失效？ #

• JSON.stringify无法处理FormData和File这类特殊对象：它们的内部属性是不可枚举的，序列化后会变成空对象{}。
• Axios默认发送JSON请求时，会自动对请求体调用JSON.stringify，所以你的media数组里的data（FormData）和url（File）字段就被转换成了空对象，服务器自然接收不到有效数据。

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