Node.js使用Multer多图上传如何保持用户选择的文件顺序

可以实现，Multer 原生默认就会保留前端提交的文件顺序，只要前端按用户操作顺序提交文件，后端拿到的req.files数组顺序就和用户选择/拖拽的顺序完全一致。

实现&排查要点 #

• 前端操作要求：
  监听文件选择控件的change事件或拖拽区域的drop事件时，拿到的原生FileList本身就是按用户选择/拖拽的顺序排列的，按原有顺序依次将文件append到FormData对象即可，不要额外做重排操作，示例逻辑如下：

  const formData = new FormData()
  // fileList 是input.files或者drop事件拿到的文件列表，原生顺序就是用户操作顺序
  for (let i = 0; i < fileList.length; i++) {
    formData.append('images', fileList[i])
  }
  // 提交formData即可
  

• 后端无需额外调整：
  你当前的后端代码已经可以正确拿到按顺序排列的文件列表，req.files数组的顺序完全匹配前端append的顺序，原有逻辑不需要修改。格式化后的参考代码如下：

  exports.summaryPost = (req, res) => {
    upload(req, res, (err) => {   
      if(err) {
        res.send(err)
      } else {
        const files = []
        // req.files的顺序默认和用户操作顺序一致
        for(const file of req.files)  {
          files.push({imageName: file.filename});
        }
        // 后续自行处理files数组即可
      }
    })
  }
  

• 异常情况排查：如果出现顺序不一致，先排查是否在自定义的Multer storage逻辑里对文件数组做了重排，或者前端append文件时打乱了原生FileList的顺序。

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