如何使用带有 Nuxt.js 和 Axios 的预签名 URL 将文件上传到 S3 存储桶？答案

【问题标题】：How to upload a file into a S3 bucket using a presigned url with Nuxt.js and Axios?如何使用带有 Nuxt.js 和 Axios 的预签名 URL 将文件上传到 S3 存储桶？
【发布时间】：2021-12-18 14:32:12
【问题描述】：

我想在我的 Nuxt.js 网站上使用 Axios 将文件上传到 S3 存储桶。我已经管理了获取预签名 URL 的部分。当我尝试在 Postman 中使用预签名 URL 时，一切正常，但当我在 Axios 中尝试时，我收到此错误：Uncaught (in promise) ReferenceError: Access is not defined。

这是我的代码：

<template>
  <v-file-input label="Select your file to upload" accept="image/*" v-model="myFile">
    File to upload to S3
  </v-file-input>
</template>

<script>
export default {
  data() {
    return {
      myFile: null,
      ApiGatewayUrl: "https://xxxxxx.execute-api.eu-central-1.amazonaws.com/"
    }
  },
  methods: {
    uploadFile() {
      // get the pre-signed URL
      this.$axios.get(this.ApiGatewayUrl, {
        headers: {
          Authorization: this.$auth.strategy.token.get()
        }
      }).then((response) => {
      
        // now do a PUT request to the pre-signed URL
        this.$axios.put(response.data, {
          files: this.myFile
        }, {
          headers: {
            [Content-Type]: 'multipart/form-data'
          }
        }).then((response) => {
          this.setState({
            statusCode: response.status,
          })
        })
      })
    }
  }
}
</script>

由于它与 Postman 一起工作，我猜错误来自我的 Axios 配置。

【问题讨论】：

如果我删除括号，我无法用破折号编译网站，我得到一个语法错误...
彻底删除[Access-Control-Allow-Origin]: "*",，然后重试
为什么你有Authorization: null,？拆分从请求中获取令牌，以便您有一些更清晰的代码 - 这是一个单独的问题
我从标题中删除了 [Access-Control-Allow-Origin]: "*", 和 Authorization: null, 并编辑了我的帖子以使我的代码更清晰。但即使没有这两个道具，我仍然会得到同样的错误：Uncaught (in promise) Error: Network Error.
谢谢 - response 的输出是什么？

标签： javascript amazon-s3 axios nuxt.js

【解决方案1】：

您指定的内容类型标题错误。

替换：

headers: {
    [Content-Type]: 'multipart/form-data'
}

与：

headers: {
    "Content-Type": "multipart/form-data"
}

【讨论】：