React中input[type=file]绑定state报错，Node.js上传接口如何处理？

我来帮你一步步解决这两个问题，先从前端的DOM错误说起，再搞定后端的路由问题：

1. 修复React前端的File Input错误 #

你遇到的那个DOM错误，根源是浏览器的安全限制：input[type=file]的value属性只能被程序设置为空字符串，绝对不能设置成具体的文件名（比如你存在state里的uploadPic）。你的代码里把value={this.state.profile}绑定上去了，直接触发了这个限制。

解决方法： #

• 首先去掉value属性的绑定，或者如果需要重置文件选择框的话，只把value设为空字符串。
• 另外，你当前只存了文件名，但实际要上传文件的话，应该存储整个File对象，而不是文件名。修改后的前端代码如下：

updateProfileImage = ev => {
  // 存储完整的File对象，而不是仅文件名
  const selectedFile = ev.target.files[0];
  console.log(selectedFile);
  this.setState({ profile: selectedFile });
}

// 移除value绑定，或者需要重置时设为""
<input 
  className="form-control" 
  type="file" 
  name="profile" 
  onChange={this.updateProfileImage} 
  placeholder="Upload Product profile picture" 
/>

如果之后需要重置文件选择框，可以通过修改key属性让React重新渲染input：

<input 
  key={this.state.profile ? 'has-file' : 'no-file'}
  className="form-control" 
  type="file" 
  name="profile" 
  onChange={this.updateProfileImage} 
  placeholder="Upload Product profile picture" 
/>

2. 修复Node.js后端的路由问题 #

你的后端路由用了router.get，但文件上传必须使用POST请求——GET请求无法携带文件的二进制数据，multer的upload.single()也无法正常工作。

后端修改： #

把router.get改成router.post，同时调整代码逻辑避免重复响应：

// 改成POST请求，匹配前端的上传方式
router.post('/add-new-product', upload.single('profile'), (req, res) => {
  // 注意：req.body的字段需要前端用FormData.append()添加
  let product = new Product({
    name: req.body.name,
    description: req.body.description,
    profile: req.file.path,
    cat: {
      catID: req.body.catID,
      catName: req.body.catName
    }
  });

  product.save((err, result) => {
    if(err) return res.json(err); // 添加return，避免后续代码执行
    res.json(result);
  })
})

前端提交逻辑补充： #

提交表单时必须用FormData来封装文件和其他字段，不能用普通JSON。示例代码如下：

handleSubmit = () => {
  const formData = new FormData();
  formData.append('profile', this.state.profile); // 传入之前存储的File对象
  formData.append('name', this.state.name);
  formData.append('description', this.state.description);
  formData.append('catID', this.state.cat.catID);
  formData.append('catName', this.state.cat.catName);

  // 用fetch发送POST请求
  fetch('/add-new-product', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('上传成功', data);
    // 上传成功后重置表单状态
    this.setState({ profile: null, name: '', description: '', cat: {} });
  })
  .catch(err => console.error('上传失败', err));
}

关键注意点 #

• 永远不要给input[type=file]设置非空的value，这是浏览器的硬性安全规则。
• 前端上传文件必须使用FormData，后端对应使用POST路由接收。
• 确认你的multer配置正确（比如存储路径、文件大小限制等，你没贴这部分代码，记得自行检查）。

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