如何修复Node.js+React.js项目中Multer不将文件存入指定服务端文件夹的问题

1. 前端文件赋值错误 #

file类型输入框的e.target.value是浏览器生成的伪路径，并非真实文件对象，你之前将这个值存入image状态后传给FormData，后端收到的不是可解析的文件资源。
修改方案：
替换imageHandler逻辑，同时移除file输入框的value属性（file输入框为只读属性，手动赋值会触发异常）：

// 修改后的imageHandler
const imageHandler = (e) => {
    const file = e.target.files[0]
    if (!file) return
    const reader = new FileReader();
    reader.onload = () => {
        if(reader.readyState === 2) {
            setImageHolder(reader.result);
            setShowImage(true);
        }
    }
    reader.readAsDataURL(file);
    setImage(file); // 存储真实文件对象
}

// 修改后的file输入框，移除value属性
<input name="image" onChange={imageHandler} 
className="opacity-0 w-64 h-60 absolute cursor-pointer" type="file" accept="image/*" required/>

2. 上传请求缺少正确请求头 #

发送FormData数据时需要指定multipart/form-data类型的请求头，否则后端无法正确解析文件数据。
修改方案：
调整Axios请求逻辑：

Axios.post('/api/admin/addproduct',formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then((res) => {
    console.log(res);
})

3. 后端控制器取值逻辑错误 #

Multer解析成功的文件会存入req.file对象，而非req.body，你之前从req.body取的image只是前端传的伪路径，既无法对应上传的文件，也不能用于后续资源访问。
修改方案：
调整控制器逻辑：

const admin_addproduct = (req, res) => {
    const { brand, item, quantity, description } = req.body;
    // 从req.file中取上传后的文件名，也可根据需要存储完整访问路径
    const image = req.file.filename;

   Product.create({
      image,
      brand,
      item,
      quantity,
      description  
   })
   .then((product) => {
       res.status(200).json({ product, success: 'Successfully added!' })
   })
   .catch((err) => console.log(err))
}

4. Multer存储路径风险 #

相对路径会受Node进程启动目录影响，容易出现找不到目标文件夹的问题，同时Multer不会自动创建目标文件夹，需提前手动创建。
修改方案：
调整Multer配置的存储路径为绝对路径：

const storage = multer.diskStorage({
    // 调整路径拼接规则，确保指向你实际的Bicycles文件夹
    destination: (req, file, cb) => {
        cb(null, path.join(__dirname, '../../Bicycles'))
    },
    filename: (req, file, cb) => {
        console.log(file);
        cb(null,file.fieldname + "-" + Date.now() + path.extname(file.originalname));
    }
})

修改完成后手动在对应目录创建Bicycles文件夹，确保Node进程对该文件夹有读写权限。

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