Question

我需要发布一组图像和一张图像进行产品预览。这是我的multer设置

const multer = require('multer');

// Multer settings
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});

const fileFilter = (req, file, cb) => {
  // reject a file
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

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

const multerSettings = upload.fields([{ name: 'thumb', maxCount: 1 }, { name: 'images', maxCount: 8 }]);

module.exports = multerSettings;

我的发布数据模型。我正在使用MongoDB

thumb: {
  url: String
},
images: [{url: String}]

客户端部分

const fd = new FormData();
const { images, thumb } = state.details;
fd.append('thumb', thumb);
fd.append('images', images);
await this.$axios.post('/product', fd);

图像是文件[File，File，File]的数组，由于某种原因，服务器上未定义req.files ['images']，但是thumb可以正常工作。当我通过邮递员发送相同的数据时，所有工作都按预期进行。在标题预览器的浏览器中，我看到以下数据

thumb: (binary)
images: [{},{},{}]

也许图像应该是二进制数据的数组？而当发送这样的单个文件

fd.append('images', images[0]);

req.files ['images']可以正常工作。我需要以某种方式修改客户端上的数组。我不知道该怎么办。

如果有任何提示，我将不胜感激

Answer 1

解决方案非常简单。

const fd = new FormData();
const { images, thumb } = state.details;
fd.append('thumb', thumb);;
for(let i = 0; i < images.length; i++) {
   fd.append('images', images[i]);
}
await this.$axios.post('/product', fd);

Answer 2

    const files = new FormData();
    files.append('files', data);

    const res = await httpApi.post('/user/upload', files, {headers: { 'Content-Type': 'multipart/form-data'}});

这有效！ :)

通过axios发送数据时未定义Multer req.files，但是使用Postman时一切正常

2 个答案: