vue express将多个文件上传到亚马逊s3

Posted 2021-04-06

我需要一个关于如何在亚马逊S3上传多个文件图像的帮助。我想说我有三个像这样的输入

<template lang="html">
 <form enctype="multipart/form-data" @submit.prevent="sendFile">
  <input type="file" ref="file1" @change="selectFile1">
  <input type="file" ref="file2" @change="selectFile2">
  <input type="file" ref="file3" @change="selectFile3">
  <div class="field">
   <button class="button is-info">Send</button>
  </div>
 </form>
</template>

而我的前端vue脚本看起来像这样

<script>
 import _ from 'lodash'

 export default {
  name: 'BulkUpload',



data() {
    return {
      file: "",
      message: "",
      error: false,
      sendFiles: []
    }
  },

  methods: {
    selectFile1() {
      this.file = this.$refs.file1.files[0]
      this.sendFiles.push(this.file)
      console.log(this.sendFiles);
    },

    selectFile2() {
      this.file = this.$refs.file2.files[0]
      this.sendFiles.push(this.file)
      console.log(this.sendFiles);
    },

    selectFile3() {
      this.file = this.$refs.file3.files[0]
      this.sendFiles.push(this.file)
      console.log(this.sendFiles);
    },

    sendFile() {

      let formData = new FormData()
      _.forEach(this.uploadFiles, file => {
        formData.append('file', file)
      })

      var self = this
      axios.post('http://localhost:3000/image/bulkupload', formData)
      .then(function(response) {
        console.log(response);
        self.message = "File has been uploaded"
        self.file = ""
        self.error = false
      })
      .catch(function(err) {
        self.message = "Something went wrong"
        self.error = true
        console.log(err);
      })
    }
  }
}
</script>

在使用formData将其发送到快速服务器之后，我的图像路由将使用此代码处理它

const sendingImage = require('../helper/sendingImage');

    router.post('/bulkupload', sendingImage.upload.array("file"), (req, res) => {
  var promises=[];
  for(var i = 0; i < req.files.length; i++) {
    var file = req.files[i];
    promises.push(sendingImage.uploadLoadToS3(file));
  }
  Promise.all(promises).then(function(data){
    res.send('Uploadedd');
    console.log('success');
  }).catch(function(err) {
    console.log('failed');
    res.send(err.stack);
  })
})

我的助手看起来像这样

const multer = require('multer');
const aws = require('aws-sdk');

aws.config.update({
  accessKeyId: <my access id>,
  secretAccessKey: <my secret key>
})

const upload = multer({
  dest: './uploads/'
})

function uploadLoadToS3(ObjFile){
  var params = {
    ACL :'public-read',
    Body : new Buffer(ObjFile.buffer),
    Bucket:'vue-express-upload',
    ContentType:ObjFile.mimetype,
    Key:ObjFile.originalname
  }
  return s3.upload(params).promise();
}

module.exports = {
  upload,
  uploadLoadToS3
}

说实话，我的代码没有任何问题。它发送响应状态200没有任何错误。但问题是，当我检查我的S3存储桶时，它没有任何上传的文件。它还是空的。我的代码有什么问题吗？

答案

我发现使用aws-sdk的解决方案。我也将使用此解决方案和我的项目。

致谢：StackOver - Answer参考：Multer-s3

在您的帮助文件中，您将保留它：

const aws = require('aws-sdk')
const multer = require('multer')
const multerS3 = require('multer-s3')

aws.config = new aws.Config({
    accessKeyId: <my access id>,
    secretAccessKey: <my secret key>,
    region: <my region>
})
const s3 = new aws.S3()
const upload = multer({
    storage: multerS3({
    s3: s3,
    acl: 'public-read',
    bucket: 'vue-express-upload',
    contentType: function(req, file,cb){
        cb(null, file.mimetype)
    },
    key: function (req, file, cb) {
        cb(null, file.originalname)
    }
    })
})

module.exports = upload

您还可以将文件的键更改为更独特的内容，例如日期/分钟/秒。由您自行决定，我使用文件名作为密钥。

在您的路由器中，路由将如下所示：

const upload = require('../helper/sendingImage')

router.post('/bulkupload', upload.array('files'), (req, res) => {
    console.log('success')
    //console.log(req.files)
    res.send('Uploadedd')
    //res.send(req.files)    
})

要查看上传数据：

router.post('/bulkupload', upload.array('files'), (req, res) => {
    res.send({
        status: 200,
        data: {
            sucess: true,
            file: req.files
        }
    })   
})

如果没有中间件文件，它就不会发送。不会返回错误。唯一可以返回的错误是AWS访问信息。

注意：我用过邮差。