使用React结合multer上传图片至文件系统时文件未保存如何解决

问题原因与解决方案 #

你遇到的核心问题是multer的存储路径相对路径解析错误，以及可能存在的目标目录未提前创建的问题，可按以下步骤修复：

1. 改用绝对路径配置存储目录
   multer的dest参数的相对路径是相对于Node进程启动时的工作目录，而非当前routes.js文件所在目录，很容易出现路径偏移。你需要使用path模块结合__dirname（当前文件的绝对路径）生成准确的存储路径：
   首先在routes.js顶部引入path模块：
   const path = require('path')
   修改multer初始化代码：
   const upload = multer({ dest: path.join(__dirname, '../../public/uploads') })

2. 提前创建uploads目录
   multer不会自动创建不存在的存储目录，你需要手动在public目录下新建uploads文件夹，或者使用fs模块/mkdirp包在代码中提前判断并创建目录，避免存储失败。

3. 排查验证
   如果修改后仍未生效，可以在路由中打印上传信息排查问题：

router.post('/upload', upload.single('profileImage'), (req, res) => {
    // 打印文件信息，正常会输出文件大小、存储路径等内容，为空则说明multer未正确解析文件
    console.log('上传文件信息：', req.file)
    // 打印最终生成的存储目录，核对路径是否符合预期
    console.log('存储目录绝对路径：', path.join(__dirname, '../../public/uploads'))
    return res.json({ status: 'Image Uploaded' })
})

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