Question

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

req.body按预期显示该数组。

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

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

将图像附加到名称为Forms的FormData上，然后再通过设置了multipart / form-data标头的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.body似乎包含任何数据，并且req.files为空。一旦传递给files.map（）项，则未定义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问题和中等程度的帖子，而以上流程似乎包含了该问题的主要三个解决方案。

将文件名附加到FormData数组的项
设置POST请求标头
在明文参数中包括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-上传图像数组

1 个答案: