如何将Node.js+React单图上传功能改为多图同时上传？

你已经添加了multiple属性，接下来需要修改客户端状态管理、FormData构建逻辑，以及服务端的文件接收配置，具体如下：

1. 客户端React状态与文件选择逻辑修改 #

原来的状态仅存储单个文件，需要改为数组来保存选中的多个文件：

// 将单个文件状态改为数组
const [files, setFiles] = useState([]);

// 修改文件选择事件，获取所有选中的文件
const setimgfile = (e) => {
  // 将FileList转为数组存储
  setFiles(Array.from(e.target.files));
}

2. 客户端FormData构建逻辑修改 #

需要循环把所有选中的文件添加到FormData中，保持字段名一致（这里用"photo"）：

const addUserData = async (e) => {
  e.preventDefault();

  var formData = new FormData();
  // 循环添加所有选中的文件
  files.forEach(file => {
    formData.append("photo", file);
  });

  // Axios会自动处理multipart/form-data的Content-Type，无需手动设置，否则会丢失边界标识符导致解析失败
  const res = await Axios.post("/insertImage", formData);

  if (res.data.status == 201) {
    console.log("上传成功")
  } else {
    console.log("上传失败")
  }
}

3. 服务端Multer配置与接口修改 #

将upload.single()改为upload.array()来接收多个文件，接口中使用req.files（复数）获取文件列表：

// 修正拼写错误：confing → config
var imgconfig = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, "./uploads");
    },
    filename: (req, file, callback) => {
        // 优化：提取文件扩展名，避免原文件名带点导致的格式错误
        const ext = file.originalname.split('.').pop();
        callback(null, `image-${Date.now()}.${ext}`)
    }
});

// 修正错误处理方式：需传递new Error
const isImage = (req, file, callback) => {
    if (file.mimetype.startsWith("image")) {
        callback(null, true)
    } else {
        callback(new Error("仅允许上传图片文件"))
    }
}

var upload = multer({
    storage: imgconfig,
    fileFilter: isImage
})

// 修改接口为接收多个文件，upload.array第二个参数为可选的最大上传数量
app.post("/insertImage", upload.array("photo", 10), (req, res) => {
    // 多个文件存储在req.files数组中
    const filenames = req.files.map(file => file.filename);
    
    console.log("上传的文件列表：", req.files);
    // 返回结果给客户端
    res.status(201).json({ status: 201, filenames });
});

内容的提问来源于stack exchange，提问作者Omar Dak Elbab