Question

我在客户端上有一个表单，允许用户将多个图像添加到列表中，并且每个图像都有用于标题的文本输入。

当用户提交表单时，我正在尝试使用一种Express路由来接受文件数组和标题。我正在客户端上填充FormData，并向服务器发送POST请求。

const data = new FormData();
//imageFiles is an array populated with multipart/form files
imageFiles.forEach(imageFile => data.append('uploads', imageFile));
//append the caption data
imageFileCaptions.forEach(caption => data.append('captions[]', caption));

我使用axios将表单数据发布到服务器。

axios.post(`/api/item/update`, data)

这是Express路线：

router.post('/update', upload.array('uploads'), processAttachments, async (req, res) => {
  const item = req.body;
  const result = await service.update(item, req.attachments, req.user);
  ...
});

对于上载中间件，我正在使用multer和multer-s3。一切正常，在下一个中间件功能中，我得到了req.files带有上传文件的数组。

const upload = multer({
  storage: multerS3({
    s3,
    bucket: process.env.STORAGE_BUCKET,
    key: (req, file, cb) => {
      cb(null, Date.now().toString())
    }
  })
});

问题是我似乎无法正确通过captions数组。req.body看起来像：

{"captions[]":"myvalue"}

我尝试在body-parser之前添加processAttachments中间件，但这也不起作用。

Multer似乎可以毫无问题地处理文件数组，但是如何才能让服务器也解析FormData的字幕？

使用Express上传带字幕的图像数组

0 个答案: