使用Multer在Next.js中无法上传文件的问题求助

你的代码存在几个关键问题，导致文件看似上传成功但实际未写入目标目录，以下是具体问题和修复步骤：

前端代码问题 #

1. 文件选择事件处理错误 #

onImageChange函数参数错误，且未将选中文件存入状态，反而发起了错误请求。正确逻辑是获取选中文件并更新Image状态：

const onImageChange = (e) => {
  // 获取选中的第一个文件
  setImage(e.target.files[0]);
}

2. 图片上传请求未执行且字段名不匹配 #

uploadBook里的图片上传请求被注释，且bodyImage.append的字段名file与后端要求的theFiles不匹配，导致后端无法识别文件。同时要确保请求正常发起：

const uploadBook = async (e) => {
  e.preventDefault()
  // 提交书籍信息（修正原代码中包裹body的冗余对象）
  let body = {
      title: Title,
      Description,
      Price,
      Authour
  }
  await axios.post('/api/newBook', body).then((res) => {
      console.log(res.data)
  })
  
  if (!Image) return; // 无选中文件则终止
  const bodyImage = new FormData();
  bodyImage.append("theFiles", Image); // 字段名与后端保持一致
  const config = {
      headers: { 'content-type': 'multipart/form-data' },
      onUploadProgress: (event) => {
        console.log(`Current progress:`, Math.round((event.loaded * 100) / event.total));
      },
    };
  
  // 取消注释，发起图片上传请求
  const response = await axios.post('/api/bookImageUpload', bodyImage, config);
  console.log('response', response.data); 
}

后端代码问题 #

1. 存储路径改用绝对路径 #

相对路径./images可能因Next.js运行环境导致指向错误，建议使用绝对路径，同时手动创建项目根目录下的images文件夹（multer不会自动创建目录）：

import nextConnect from 'next-connect';
import multer from 'multer';
import path from 'path'; // 新增导入

const upload = multer({
  storage: multer.diskStorage({
    // 指向项目根目录下的images文件夹
    destination: path.join(process.cwd(), 'images'),
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

// 后续代码不变

2. 验证文件接收状态 #

在API路由的post处理函数中打印req.file，确认后端是否接收到文件：

apiRoute.post((req, res) => {
  console.log('接收到的文件:', req.file); // 新增打印
  res.status(200).json({ data: 'success', file: req.file });
});

额外检查项 #

• 确认项目根目录下存在images文件夹
• 检查Node.js进程是否有权限写入images目录
• 查看前端控制台的请求响应，确认返回的文件信息是否存在

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