React.js中用FormData无法上传文件，console.log无输出求助

一、直接打印FormData/entries()为空的原因 #

formData.entries()返回的是迭代器（Iterator）对象，浏览器控制台直接打印迭代器不会展开显示内部内容，看起来像是空的。你需要把它转换成数组才能看到具体键值对：

console.log(Array.from(formData.entries()));
// 或者用展开运算符
console.log([...formData.entries()]);

二、你的代码还有两个核心问题 #

1. FormData里加错了内容
   你现在append的是URL.createObjectURL(file[0])生成的临时URL字符串，这不是实际的文件数据，后端根本没法通过这个URL拿到文件。正确的做法是直接append File对象本身：

// 错误写法
formData.append("image", url);
// 正确写法
formData.append("image", file[0]);

URL.createObjectURL只是用来在前端预览文件的，不能用来上传。

2. 未定义的type变量
   代码里的mime: type中的type没有定义，应该用file[0].type来获取文件的MIME类型：

const mime = file[0].type;

三、修正后的完整代码 #

const FileUpload = ({ src, sendImage, input }) => {
  const [source, setSource] = useState();

  const handleUpload = (e) => {
    const file = e.target.files;
    if (!file || file.length === 0) return; // 加判断防止无文件情况
    const fileObj = file[0];
    const url = URL.createObjectURL(fileObj);
    const fileName = fileObj.name;
    const mime = fileObj.type;
    setSource(url);
    
    const formData = new FormData();
    formData.append("image", fileObj); // 传入File对象
    
    // 正确打印FormData内容
    console.log([...formData.entries()]);
    sendImage({ url: formData, fileName, mime });
  };

  return (
    <Button variant="contained" component="label" sx={{ marginTop: "15px", borderRadius: 2 }}>
      <input 
        hidden 
        accept={input === "audio" ? "audio/*" : "video/*"} 
        type="file" 
        onChange={handleUpload} 
      />
      UPLOAD
    </Button>
  );
};

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