使用ReactJS与Node/Express实现文件上传遇React端发送异常

嘿，我看你遇到React端文件上传的问题了——Node/Express端用Postman测试没问题，但React这边就是发不了文件。咱先从你给出的代码片段里找问题，再一步步修复：

1. 第一个问题：State里存的是FileList而非单个File #

你在onChange里把e.target.files直接存到state里了，这其实是一个FileList对象（类似数组的集合），而不是单个文件实例。如果你的需求是单文件上传，应该取集合里的第一个元素：

onChange(e) {
  // 单文件上传时，取FileList的第一个元素
  this.setState({ file: e.target.files[0] }, () => {
    // setState是异步操作，要在回调里查看最新的state值
    console.log(this.state.file);
  });
}

2. 核心问题：FormData构建与请求发送的正确姿势 #

你的fileUpload函数没写完，但这部分是关键——必须用FormData来包装文件，并且发送请求时不要手动设置Content-Type（浏览器会自动生成带边界符的multipart/form-data头，手动设置会丢失边界符，导致Node端无法解析）。

用Fetch实现的完整示例： #

fileUpload(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const { file } = this.state;

  // 先判断是否选择了文件
  if (!file) {
    alert("请先选择要上传的文件");
    return;
  }

  // 构建FormData，键名要和Node端接收的名称一致（比如Node端用multer的话，对应req.files.file）
  const formData = new FormData();
  formData.append("file", file);

  // 发送POST请求
  fetch("/api/upload", {
    method: "POST",
    body: formData
    // 不要手动添加Content-Type！浏览器会自动处理
  })
  .then(response => {
    if (!response.ok) throw new Error("请求失败");
    return response.json();
  })
  .then(data => {
    console.log("文件上传成功！", data);
    // 这里可以添加上传成功后的逻辑，比如关闭模态框、刷新文件列表等
  })
  .catch(error => {
    console.error("文件上传失败：", error);
  });
}

用Axios实现的示例（如果项目用Axios的话）： #

import axios from "axios";

// ...

fileUpload(event) {
  event.preventDefault();
  const { file } = this.state;

  if (!file) {
    alert("请先选择要上传的文件");
    return;
  }

  const formData = new FormData();
  formData.append("file", file);

  axios.post("/api/upload", formData, {
    // Axios会自动处理Content-Type，不需要手动设置
    // headers: { "Content-Type": "multipart/form-data" } // 不推荐手动写
  })
  .then(res => {
    console.log("文件上传成功！", res.data);
    // 处理成功逻辑
  })
  .catch(err => {
    console.error("文件上传失败：", err);
  });
}

额外注意事项 #

• 确保Node端的接收字段和FormData里的键名一致：比如你在React里append("file", file)，Node端用multer的话就要用upload.single("file")来接收。
• 如果是多文件上传，要循环遍历e.target.files，逐个append到FormData里，比如formData.append("files", file)（注意键名用复数，Node端对应upload.array("files")）。

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