Dropzone / React / NodeJS - 上传图像数组

Question

我正在尝试将一组照片上传到服务器，但 req.files 数组到达那里时总是显示为空。

req.body 按预期显示数组。

图像是通过 Dropzone 组件添加的。 （我尝试将其切换为标准输入，但它们似乎都以相同的方式传递文件）

    <Dropzone
       onDrop={onDrop}
       onSubmit={uploadPhotos}
       maxFiles={20}
       inputContent="Drop 20 Images"
       inputWithFilesContent={files => `${20 - files.length} more`}
     />

图像应用于 FormData，名称为图像文件在通过 Axios POST 请求发送之前附加，并设置了 multipart/form-data 标头。

export const uploadPhotos = (files) => {
const formData = new FormData();
for (let i = 0; i < files.length; i += 1) {
  formData.append("image[]", files[i]);
}
const config = {
  headers: {
    'Content-Type': `multipart/form-data`
  }
}

return async (dispatch, getState) => {
    try {
      const response = await axios.post('/api/kite/upload',  
      formData, config)
      .then(function(response) {
        console.log(response.data);
        dispatch({
          type: ORDER_CHANGE,
          payload: response.data
        });
      });
    } catch (err) {
      console.log(err);
    } finally {
      console.log('done');
    }
  }
}

一旦传递给服务器，只有 req.body 似乎包含任何数据，并且 req.files 是空的，尽管使用 Multer 中间件作为第二个参数。一旦传递给 files.map() 项目是 undefined undefined，大概是因为 req.files 是一个空数组。

var multer  = require('multer');
var AWS = require('aws-sdk');
AWS.config.setPromisesDependency(bluebird);

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'upload')
    },
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now())
    }
});
const upload = multer({
    storage: storage
}).array('image');

router.post('/upload', upload, function (req, res) {
  const file = req.files;
  let s3bucket = new AWS.S3({
    accessKeyId: IAM_USER_KEY,
    secretAccessKey: IAM_USER_SECRET,
    Bucket: 'BUCKETNAME'
  });

  s3bucket.createBucket(function () {
      let Bucket_Path = 'https://console.aws.amazon.com/s3/buckets/BUCKETNAME?region=eu-west-1';
      var ResponseData = [];

  file.map((item) => {
     // item.x are all undefined
      var fileStream = fs.createReadStream(filePath);
      var params = {
        Bucket: Bucket_Path,
        Key: item.originalname,
        Body: item.buffer,
        ACL: 'public-read'
    };

  s3bucket.upload(params, function (err, data) {
        if (err) {
         res.json({ "error": true, "Message": err});
        } else{
            ResponseData.push(data);
            if(ResponseData.length == file.length){
              res.json({ "error": false, "Message": "File Uploaded    SuceesFully", Data: ResponseData});
            }
          }
       });
     });
   });
});

我的最终目标是将图像传递到 Amazon S3 存储桶。我认为它不会影响这一点，因为没有要发送的数据，但我已将其包含在内，以防它以某种方式影响这一点。

我已经处理过许多其他类似的 Stack Overflow 问题和中型帖子，并且该问题的主要三个解决方案似乎包含在上面的流程中。

1. 将文件名附加到 FormData 数组的项目中
2. 设置 POST 请求标头
3. 在 express 参数中包含 Multer 中间件

谁能帮我弄清楚为什么 req.files 是一个空数组？

Answer 1

可能是 Dropzone 没有处理文件。尝试将其添加到 uploadPhotos 函数中：

const acceptedFiles = myDropzone.getAcceptedFiles() // "myDropzone" is just the Dropzone instance
for (let i = 0; i < acceptedFiles.length; i++) {
   myDropzone.processFile(acceptedFiles[i])
}