React上传图片至MongoDB GridFS失败：Payload显示文件为空但请求状态码200

这种情况真的很让人头疼——状态码显示成功，控制台能看到文件属性，但Payload是空的，数据库里也没东西，我之前也遇到过类似的问题，给你梳理几个可能的原因和解决办法：

• 先补全文件选择的事件处理
  看你代码里的文件输入框onChange={(e) 的内容明显没写完，点击选择文件的时候根本不会更新file状态，只有拖放时才会设置。赶紧补上：

  <input type="file" accept="image/*" className="hidden" id="fileInput" 
    onChange={(e) => setFile(e.target.files[0])}
  />
  

  不然用户通过点击选择文件时，file还是空的，自然传不上去。

• 检查请求头，不要手动设置multipart/form-data
  你的API.uploadFile方法里，千万不要手动添加Content-Type: multipart/form-data请求头！浏览器会自动为FormData生成带boundary的正确请求头，手动设置的话会丢失这个关键的boundary，导致后端完全解析不到文件。
  正确的axios请求配置应该是这样的（不要碰Content-Type）：

  // 示例API配置
  export const API = {
    uploadFile: (formData) => axios.post('/api/upload', formData, {
      headers: {
        // 这里可以加认证头比如Authorization，但是绝对不要加Content-Type
      }
    })
  };
  

• 核对前后端的文件字段名
  你前端FormData里append的是data.append('file', file)，后端接收的时候必须对应这个字段名。比如用multer处理的话，要写upload.single('file')，如果后端写成了image或者其他名字，肯定收不到文件。

• 调试FormData内容
  直接console.log FormData是看不到内容的，你可以在发送请求前用这个方法打印：

  const data = new FormData();
  data.append('name', file.name);
  data.append('file', file);
  // 打印FormData的所有键值对
  for (let [key, value] of data.entries()) {
    console.log(`${key}:`, value);
  }
  

  确认文件确实被正确添加到了FormData里。

• 检查后端GridFS处理逻辑
  状态码200可能是后端没做错误判断就返回了成功，比如即使没拿到文件也返回200。要确认后端是否正确使用了multer-gridfs-storage（或类似库）连接MongoDB，是否正确将文件写入GridFS存储桶，有没有处理文件为空的情况。

内容来源于stack exchange