Vue Express将多个文件上传到Amazon S3 [英] vue express uploading multiple files to amazon s3

问题描述

我需要有关如何在Amazon S3上上传多个文件图像的帮助.我可以说我有三个这样的输入

i need a help on how to upload multiple files image on amazon S3. i let's say that i have three input like this

<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脚本如下所示

and my frontend vue script looks like this

<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将其发送到快递服务器后，我的图像路线将使用此代码处理

after sending it in using formData to the express server, my image route will handle it with this code

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存储桶时，它没有任何上传的文件.它仍然是空的. 我的代码有什么问题吗?

to be honest, my code works without any problem. it send response status 200 without any error. but the problem is, when i check my S3 bucket, it doesn't have any uploaded file in it. it's still empty. is there anything wrong with my code ?

推荐答案

我发现使用aws-sdk的解决方案.我还将使用此解决方案和我的项目的好处.

The solution I found for using aws-sdk. The good that I will also use this solution and my projects.

信用: StackOver-答案 参考: Multer-s3

在您的帮助文件中，您将像这样保留它:

In your helper file you'll leave it like this:

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

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

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

In your router the route will look like this:

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)    
})

要查看上传数据，请执行以下操作:

To view upload data:

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

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

注意:我使用了邮递员.

这篇关于Vue Express将多个文件上传到Amazon S3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！