如何使用 vuejs 將多個圖像上傳到 s3

Question

如何將多張圖片上傳到亞馬遜 s3

這是我的圖片上傳中間件

const aws = require("aws-sdk");
const multer = require("multer");
const multerS3 = require("multer-s3");

aws.config.update({
  secretAccessKey: process.env.AWSSecretKey,
  accessKeyId: process.env.AWSAccessKeyId
});

const s3 = new aws.S3();

const upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'ajibade',
        acl: 'public-read',
        metadata: (req, file, cb) => {
            cb(null, { fieldName: file.fieldname });
        },
        key: (req, file, cb) => {
            cb(null, Date.now().toString())
        }
    })
})

module.exports = upload;

這就是我上傳文件的方式

<label class="choosefile-button">
                    
                    <input
                      type="file"
                      @change="onFileSelected1"
                    >
                    <p style="margin-top: -70px">{{ fileName }}</p>
                  </label>
                  
                   <label class="choosefile-button">
            
                    <input
                      type="file"
                      @change="onFileSelected2"
                    >
                    <p style="margin-top: -70px">{{ fileName }}</p>
                  </label>

我怎么稱呼 function

methods: {
    onFileSelected1(event) {
      this.selectedFile = event.target.files[0]
      console.log(this.selectedFile)
      this.fileName = event.target.files[0].name
    },
      onFileSelected2(event) {
      this.selectedFile = event.target.files[0]
      console.log(this.selectedFile)
      this.fileName = event.target.files[0].name
    },
    }

每次我單擊 onFileSelected1 或 onFileSeleted2 時，它都會為兩個輸入上傳相同的圖像

這是我的發帖請求

router.post(`/products`, upload.single("photo"), async (req, res) => {
  console.log(res);
  try {
    let product = new Product();
    product.photo = req.file.location;
    await product.save();
  } catch (error) {
    console.log(error);
   
  }
});

請問我怎么能 go 關於這個

Answer 1

這篇博客文章非常深入地解釋了它是如何完成的。

基本上你需要做的是添加一個<input type="file" multiple />並在你上傳的 function 中把它變成 multipart/form-data。 然后，當您將其上傳到后端時，您使用 multer 和 multer-s3 將其發送到 S3。

我認為您在這里混淆了一些概念，您的上傳 function 看起來像是一條應該位於應用程序后端的路由，然后您使用例如 axios 或提取 ZDB94644238714CADE183ADE1 發送上傳文件的請求