Next.js多图上传问题修复：文件名叠加与返回路径格式错误

问题1：文件名叠加异常的修复 #

你当前的filename是全局变量，每次调用getFileName都会把新文件的原文件名追加到同一个变量里，导致后续文件名持续叠加。解决方法是为每个文件生成独立的唯一文件名，把文件名生成逻辑放到getFileName函数内部，避免全局变量的累加：

// 移除全局filename变量，改为在函数内为每个文件生成独立前缀
const getFileName = (file) => {
  // 用时间戳作为前缀，确保每个文件名唯一
  const timestamp = new Date().toISOString().replace(/:/g, '-');
  // 可选：添加随机后缀进一步避免重名冲突
  // const randomSuffix = Math.random().toString(36).slice(2, 8);
  return `${timestamp}-${file.originalname}`;
};

修改后，每个上传文件会得到独立的文件名，比如2024-05-20T14-25-10-fundamental.png和2024-05-20T14-25-11-starter.png，不会出现叠加问题。

问题2：响应数据格式不符的修复 #

当前接口只返回最后一个文件的路径，因为你依赖了全局的filename变量，且没有遍历所有上传文件。multer处理多文件上传后，所有文件的信息会存在req.files数组中，你需要遍历这个数组生成完整的路径数组：

修改nextConnect.post的处理逻辑：

nextConnect.post((req, res) => {
  // 遍历所有上传文件，生成对应的访问路径
  const filePaths = req.files.map(file => `/images/${file.filename}`);
  res.status(200).json({ data: filePaths });
});

修改后，接口会返回你期望的数组格式，比如['/images/2024-05-20T14-25-10-fundamental.png', '/images/2024-05-20T14-25-11-starter.png']。

完整修改后的api/upload代码 #

import { createRouter } from "next-connect";
import multer from "multer";

const nextConnect = createRouter();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./images");
  },
  filename: (req, file, cb) => cb(null, getFileName(file)),
});

const upload = multer({ storage: storage });

const getFileName = (file) => {
  const timestamp = new Date().toISOString().replace(/:/g, '-');
  return `${timestamp}-${file.originalname}`;
};

nextConnect.use(upload.array("file"));

nextConnect.post((req, res) => {
  const filePaths = req.files.map(file => `/images/${file.filename}`);
  res.status(200).json({ data: filePaths });
});

export default nextConnect.handler({
  onError(error, req, res) {
    res
      .status(501)
      .json({ error: `Sorry something Happened! ${error.message}` });
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

export const config = {
  api: {
    bodyParser: false,
  },
};

主文件的uploadImages函数无需修改，现在调用接口后res.data会是包含所有文件路径的数组。

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