JavaScript Express 如何接收动态表单请求并将图片数据存入数组

方案1：优化前端字段命名（推荐，维护成本最低） #

动态生成图片上传表单元素时，统一将name属性设为数组格式，示例如下：

<!-- EJS模板中动态插入的图片上传控件代码 -->
<input type="file" name="uploadImages[]" accept="image/*">
<!-- 若有图片描述、备注等关联字段，也用相同规则命名 -->
<input type="text" name="imageDesc[]" placeholder="输入图片描述">

后端Express如果使用multer处理文件上传，直接调用array方法即可直接拿到所有图片组成的数组，无需额外遍历：

const multer = require('multer');
// 配置存储规则，可根据需求自定义
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/uploads')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})
const upload = multer({ storage: storage })

// 路由配置
app.post('/form/submit', upload.array('uploadImages'), (req, res) => {
  // req.files 即为所有上传图片组成的数组，可直接存入数据库
  const allImages = req.files
  // 关联的图片描述也是数组，索引和图片一一对应
  const allImageDesc = req.body.imageDesc || []
  // 后续存储逻辑
})

方案2：后端遍历过滤参数（兼容前端无法修改的场景） #

如果前端已经固定了参数命名规则（比如参数为img1/img2/imgN格式），可以在后端过滤所有符合前缀规则的参数：

app.post('/form/submit', upload.any(), (req, res) => {
  const imageList = []
  // 遍历所有上传文件的键名，匹配图片参数前缀
  Object.keys(req.files).forEach(paramKey => {
    // 此处前缀根据实际参数名调整，比如参数是image开头就替换为startsWith('image')
    if (paramKey.startsWith('img')) {
      imageList.push(req.files[paramKey])
    }
  })
  // imageList 即为整理好的图片数组
})

如果图片是以base64格式存在请求体中，将上述代码的req.files替换为req.body即可，过滤逻辑完全一致。

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