使用Multer上传图片至public文件夹失败的问题排查求助

你的问题根源在于前端没有以正确的格式（multipart/form-data）传递文件，导致Multer无法捕获到上传的文件；同时还有路由不匹配、控制器字段处理错误这两个次要问题。下面一步步帮你解决：

1. 前端：改用FormData传递文件和表单数据 #

你当前的axios请求直接传递了普通JSON对象，而上传文件必须使用FormData来包装数据，否则Multer无法解析文件。修改handleClick函数如下：

const handleClick = async (e) => {
  e.preventDefault();
  
  // 创建FormData实例，用于包装文件和其他字段
  const formData = new FormData();
  // 追加普通字段
  formData.append('diseasename', diseasename);
  formData.append('weight', weight);
  formData.append('height', height);
  formData.append('medicines', medicines);
  formData.append('desc', desc);
  formData.append('checkdate', checkdate);
  formData.append('patientId', patientId);
  // 追加文件（注意name要和Multer配置的upload.single('image')里的名称一致）
  if (selectedImage) {
    formData.append('image', selectedImage);
  }

  try {
    const res = await axios({
      method: "POST",
      url: "http://localhost:3000/api/record/createrecord",
      data: formData,
      // 必须设置Content-Type为multipart/form-data，axios会自动处理边界符，不用手动写
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: false
    });
    console.log(res.data);
  } catch(err) {
    console.log(err);
  }
};

2. 修复路由路径不匹配问题 #

你前端请求的URL是/api/record/createrecord，但后端路由定义的是/addrecord，这会导致请求找不到对应的处理函数。修改后端路由，把路径改成和前端一致：

// 替换原路由定义
router.post('/createrecord', upload.single('image'), medicalHistory);

3. 后端控制器：正确处理Multer返回的文件信息 #

你的控制器里错误地使用了req.prescription，实际上Multer处理后的文件信息存在req.file对象里。我们需要把文件的路径（或访问URL）存入数据库的prescription字段：

export const medicalHistory = async(req,res,next) =>{
  console.log(req.file); // 现在应该能打印出文件信息了
  try{
    // 处理成前端可访问的相对路径，比如'/images/xxx.jpg'
    const prescriptionPath = req.file ? `/images/${req.file.filename}` : "";
    const newRecord = new historyCard({
      diseasename: req.body.diseasename,
      checkdate: req.body.checkdate,
      weight: req.body.weight,
      height: req.body.height,
      desc: req.body.desc,
      prescription: prescriptionPath // 这里用处理后的文件路径
    })
    console.log(newRecord);
    await newRecord.save();
    res.status(200).send(newRecord);
  }catch(err){
    next(err);
  }
}

4. 额外检查项 #

• 确保public/images文件夹已经存在：Multer不会自动创建目标文件夹，如果文件夹不存在，会抛出错误。你可以手动创建，或者在Multer配置前加代码自动创建：

  import fs from 'fs';
  const uploadDir = './public/images';
  if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });
  }
  

• 检查文件夹权限：确保Node.js进程有写入public/images文件夹的权限，避免因权限不足导致文件无法保存。
• 验证Multer配置：确认destination路径是相对于项目根目录的正确路径，当前配置./public/images是没问题的。

做完这些修改后，应该就能正常上传图片并保存到指定文件夹，同时数据库里的prescription字段也会存储正确的图片路径了。

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