如何使用预签名网址将图像上传到亚马逊 AWS S3

Question

嗨，当我尝试使用vue应用程序中预先指定的url将图像上传到我的amazon aws bucket时，我收到了400个错误请求。我已经成功生成了一个预先签名的url，但我无法使用它将图像发布到我的bucket。

获取预签名网址的路线

const express = require('express')
const router = new express.Router()
const requireAuth = require('../middleware/requireAuth')

router.use(requireAuth)

const v4 = require('uuid')

const AWS = require('aws-sdk')
const s3 = new AWS.S3({
    region: process.env.BUCKET_REGION,
    accessKeyId: process.env.ACCESS_KEY_ID,
    secretAccessKey: process.env.SECRET_ACCESS_KEY
})

router.get('/upload', async (req, res) => {
    const key = `${req.user._id}/${v4()}.jpeg`

    s3.getSignedUrl('putObject', {
        Bucket: 'my-post-app-bucket',
        ContentType: 'image/jpeg',
        Key: key
    }, (err, url) => res.send({ key, url }))
})

module.exports = router

Vue client

<template>
  <form @submit.prevent="handleSubmit">
    <input type="file" @change="handleChange">
    <button>add</button>
  </form>
</template>

<script>
export default {
  data(){
    return {
      file: ''
    }
  },
  methods: {
    handleChange(e){
      this.file = e.target.files[0]
    },
    async handleSubmit(){
      await this.$store.dispatch('images/uploadImage', this.file)
    }
  }
}
</script>

Vuex操作发布到预先指定的url

actions: {
    async uploadImage(context, file){
      try {
        const res = await api.get('/upload', {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`
          }
        })
        await axios.put(res.data.url, file, {
          headers: {
            'Content-Type': file.type
          }
        })
      }catch(err){
        console.log(err.message)
        context.commit('SET_ERROR', err.message, { root: true })
      }
    }
  }

Aws CORS许可

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "http://localhost:8080"
        ],
        "ExposeHeaders": []
    }
]

我得到“请求失败，状态代码400”错误。

Answer 1

几周前我遇到了类似的情况，下面是我如何解决的

const formData = new FormData();
Object.entries(fields).forEach(([key, value]) => {
    formData.append(key, value);
});

formData.append('file', file.originFileObj);

axios.post(url, formData, {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
})

字段来自对generate_presigned_post的调用

file是File类型中的对象