如何让 multerS3 将一组文件上传到我的存储桶？答案

【问题标题】：How can I get multerS3 to upload an array of files to my bucket?如何让 multerS3 将一组文件上传到我的存储桶？
【发布时间】：2021-03-06 09:01:06
【问题描述】：

试图让 multer 将多个文件上传到 Amazon S3。我已经能够通过单个文件上传来实现这一点，但是对于多个文件，我遇到了麻烦。从表单本身获取文件集合似乎没有任何问题。但是，绝对没有任何内容上传到 S3。我也没有收到任何可以帮助我识别问题的错误消息。评论信息按预期发布到 MongoDB 数据库。我整晚都在尝试，但似乎无法弄清楚我哪里出错了。任何想法将不胜感激。谢谢！

向API路由提交表单数据的前端JS文件：

export const submitReview = async (reviewFormData) => {
  try {
    const res = await axios({
      method: 'POST',
      url: '/api/v1/reviews',
      data: reviewFormData,
    });

    if (res.data.status === 'success') {
      showAlert('success', 'Great! Thanks for sharing!');
      // window.setTimeout(() => {
      //   location.assign('/');
      // }, 1500);
    }
  } catch (err) {
    showAlert('error', err.response.data.message);
  }
};

这是我希望上传工作的控制器文件中的内容：

const multer = require('multer');
const multerS3 = require('multer-s3-image-transform');
const sharp = require('sharp');

const aws = require('aws-sdk'),
  s3 = new aws.S3();
aws.config.update({
  secretAccessKey: process.env.AWS_ACCESS_KEY,
  accessKeyId: process.env.AWS_KEY_ID,
  region: 'us-east-1',
});

const multerFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image')) {
    cb(null, true);
  } else {
    cb(new AppError('Not an image! Please upload images only.', 400), false);
  }
};

exports.uploadReviewPhoto = multer({
  storage: multerS3({
    s3: s3,
    acl: 'public-read',
    bucket: 'bucketname',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    fileFilter: multerFilter,
    transforms: () =>
      sharp().resize(250, 250).withMetadata().jpeg({
        progressive: true,
        quality: 90,
      }),
    key: function (req, file, cb) {
      cb(null, 'reviewPhotos/' + Date.now().toString());
    },
  }),
}).array('userPhotos', 10);

不确定是否有帮助，但这是从表单获取信息的前端代码：

if (reviewForm)
  reviewForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const reviewFormData = new FormData();
    reviewFormData.set('ship', document.getElementById('ship').value);
    reviewFormData.set('rating', document.getElementById('rating').value);
    reviewFormData.set(
      'ratingDining',
      document.getElementById('ratingDining').value
    );
    reviewFormData.set(
      'ratingCabin',
      document.getElementById('ratingCabin').value
    );
    reviewFormData.set(
      'ratingKids',
      document.getElementById('ratingKids').value
    );
    reviewFormData.set(
      'ratingValue',
      document.getElementById('ratingValue').value
    );
    reviewFormData.set(
      'ratingEntertainment',
      document.getElementById('ratingEntertainment').value
    );
    reviewFormData.set(
      'userPhotos',
      document.getElementById('userPhotos').files
    );
    reviewFormData.set('sailDate', document.getElementById('sailDate').value);
    reviewFormData.set('review', document.getElementById('review').value);
    submitReview(reviewFormData);
  });

从路由器文件中包含这个只是为了表明我正在从 POST 路由调用函数：

router
  .route('/')
  .get(reviewController.getAllReviews)
  .post(
    authController.restrictTo('user'),
    reviewController.uploadReviewPhoto,
    reviewController.setShipUserIds,
    reviewController.createReview
  );

【问题讨论】：

标签： javascript node.js file-upload multer-s3

【解决方案1】：

我的问题在这里：

 reviewFormData.set(
      'userPhotos',
      document.getElementById('userPhotos').files
    );

我能够通过使用 reviewFormData.append 与 set 来使代码正常工作，然后使用 for 循环包含附加到表单的每个文件，如下所示：

const length = document.getElementById('userPhotos').files.length;
    for (let i = 0; i < length; i++) {
      reviewFormData.append(
        'userPhotos',
        document.getElementById('userPhotos').files[i]
      );
    }

【讨论】：