React前端向Node/Express传文件遇代理错误及ECONNRESET求助

嘿，我来帮你搞定这个Proxy错误和ECONNRESET的问题！你的问题主要出在前端请求格式错误+后端重复响应上，咱们一步步来修复：

1. 前端请求格式完全错误（最核心的问题） #

你现在用querystring.stringify把fileData（FormData对象）转成了urlencoded格式，这直接破坏了multipart/form-data的请求结构——FormData本身就是用来处理文件上传的容器，还能直接添加文本字段，根本不需要嵌套或者转码。

修改你的addUser函数：

addUser (event) {
  event.preventDefault(); // 务必阻止表单默认提交行为，避免页面刷新！
  const formData = new FormData();
  
  // 直接把文本字段和文件都追加到FormData里
  formData.append("entry", this.state.currname);
  formData.append("passwrd", this.state.currpasswrd);
  formData.append("file", this.state.filesToBeSent); // 确保这里是单个File对象，不是数组

  axios.post('/adduser', formData, {
    headers: {
      'Content-Type': 'multipart/form-data' // axios会自动识别，但显式声明更稳妥
    }
  })
  .then((response) => {
    console.log('请求成功:', response.data);
    this.fetchData(); // 成功后刷新用户列表
  })
  .catch((error) => {
    console.error('请求出错:', error);
  });
}

同时要确保handleFile函数正确获取单个文件（因为后端用的是upload.single("file")）：

handleFile = (e) => {
  this.setState({ filesToBeSent: e.target.files[0] }); // 取第一个选中的文件
}

2. 后端修复重复响应问题 #

你现在的路由里连续调用了两次res.send()，这会导致Node尝试发送两次HTTP响应，直接触发ECONNRESET错误——HTTP协议要求每个请求只能有一个响应。

修改后端路由代码：

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./uploads/");
  },
  filename: (req, file, cb) => {
    const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
    cb(null, newFilename);
  },
})
const upload = multer({ storage });

// 确保路由路径和前端请求的/adduser匹配
router.post("/adduser", upload.single("file"), (req, res) => {
  // 先检查文件是否上传成功
  if (!req.file) {
    return res.status(400).send('No file uploaded');
  }

  const newUser = new Todo();
  newUser.username = req.body.entry;
  newUser.passwrd = req.body.passwrd;
  newUser.fileName = req.file.filename; // 可以把文件名存到数据库里

  newUser.save((err) => {
    if(err) {
      console.error('保存用户失败:', err);
      return res.status(500).send('Failed to save user');
    }
    // 只发送一次响应，用JSON格式返回更规范
    res.json({
      message: 'User added successfully!',
      uploadedFile: req.file
    });
  });
});

3. 解决前端JSON解析错误 #

之前的Unexpected token P in JSON at position 0错误，是因为后端返回的是req.file + " and exit."这种非JSON字符串（比如[object Object] and exit.），而前端axios默认期望JSON格式，所以解析失败。修复后端响应为JSON格式后，这个错误就会自动消失。

额外检查项 #

• 确保后端的uploads文件夹已经创建，否则multer会抛出文件写入错误
• 前端构造函数里要正确初始化state并绑定函数（如果不用箭头函数的话）：

constructor(props) {
  super(props);
  this.state = {
    users: [],
    currname: '',
    currpasswrd: '',
    filesToBeSent: null
  };
  // 绑定函数到组件实例
  this.addUser = this.addUser.bind(this);
  this.fetchData = this.fetchData.bind(this);
  this.handleChange = this.handleChange.bind(this);
  this.handlePassword = this.handlePassword.bind(this);
  this.handleFile = this.handleFile.bind(this);
}

• 确认前端fetchData里的请求路径和后端用户列表接口匹配，比如如果后端用户列表接口是/users，那没问题。

这样修改后，应该就能彻底解决所有问题了！

内容的提问来源于stack exchange，提问作者A.S.J