如何使用Vue JS在私有s3存储桶中上传文件?

时间:2019-07-24 15:48:22

标签: amazon-s3 vuejs2 amazon-cognito amplifyjs

我正在尝试使用Vue组件将文件上传到s3。 这是aws_config中的s3配置:

Storage: {
    AWSS3: {
        bucket: 'bucket_name', //REQUIRED -  Amazon S3 bucket
        region: 'region_name', //OPTIONAL -  Amazon service region
        identityPoolId: 'pool_id',
        level: 'private',
        accessKeyId: 'access_key',
        secretAccessKey: 'secret_key',

    }
}

这是我上传文件的代码:

Storage.put(this.$refs.image.files[0].name,
          this.$refs.image.files[0],

          {
              contentType: 'audio/mp3',

              progressCallback(progress) {
                  console.log(`Uploaded: ${progress.loaded}/${progress.total}`);
              },
          },

      )
          .then(result => {
              console.log(result);
          })
          .catch(error => {
              console.log(error);
          })

这是我的CORS配置:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
<ExposeHeader>x-amz-request-id</ExposeHeader>
<ExposeHeader>x-amz-id-2</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

CORS配置在iOS上运行正常,但在Web上我收到CORS配置错误。任何帮助,将不胜感激。

  

所请求的资源上没有“ Access-Control-Allow-Origin”标头。

0 个答案:

没有答案