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，名称图像文件在通过设置了 multipart/form-data headers 的 Axios POST 请求发送之前被附加。

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 似乎包含任何数据，尽管使用 Multer 中间件作为第二个参数，req.files 还是空的。一旦传递给 files.map() 项目是未定义的未定义，大概是因为 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 问题和媒介 post，这个问题的主要三个解决方案似乎包含在上面的流程中。

将文件名附加到 FormData 数组的项目
设置POST请求headers
在 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])
}

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

Dropzone / React / NodeJS - Upload Image Array

node.js

reactjs

axios

multipartform-data

dropzone