上传图像数组

Question

我正在尝试将一组照片上载到服务器，但请求失败。文件数组到达时总是显示为空。

req.body按预期显示数组。

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

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

图像被应用到FormData，名称图像文件在通过设置了多部分/表单数据标题的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似乎包含任何数据，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});
            }
          }
       });
     });
   });
});

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

我已经通过了许多其他类似的堆栈溢出问题和中篇文章，这个问题的主要三个解决方案似乎都包含在上面的流程中。

1. 将文件名附加到FormData数组的项上

有谁能帮我弄清楚原因吗。文件是空数组吗？

Answer 1

可能是Dropzone没有处理这些文件。尝试将此添加到上传照片功能：

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