Question

我目前能够在React应用程序中将图像上传到AWS S3，但是在删除图像（从存储桶中删除）时遇到了麻烦。

当我上传并显示图像时，提取请求来自 https://mybucket.s3.amazonaws.com/photos/PhotoNew.jpg

当我尝试删除图像时，将提取请求发送给 https://mybucket.s3-us-east-1.amazonaws.com/photos/PhotoNew.jpg

未从存储桶中删除图像。

我目前的功能如下：

// App.js

const config = {
    bucketName: 'mybucket', // name of the bucket
    dirName: 'photos', /* optional */
    region: 'us-east-1',
    accessKeyId: 'xxxxxxxx',
    secretAccessKey: 'xxxxxxxx',
}

class App extends Component {
  constructor() {
    super();
    this.state ={
      url: u,
    }
    this.upload = this.upload.bind(this);
    this.delete = this.delete.bind(this);
  }

  // works correctly
  upload(e) {
    const file = e.target.files[0];
    S3FileUpload.uploadFile(file, config)
      .then(data => this.setState({url: data.location}))
      .catch(err => console.log(err));
  }

  delete(e) {
    const filename = "PhotoNew.jpg";
    S3FileUpload
    .deleteFile(filename, config)
    .then(response => console.log(response))
    .catch(err => console.error(err))
  }


  render() {


    return ( <div>
      Upload AWS S3
      <input 
        type="file"
        onChange={this.upload}
      />
      <button onClick={this.delete}>Delete</button>
      <img src={this.state.url} />
    </div>);
  }
}

更新

针对S3存储桶的CORS配置。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedOrigin>localhost:*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

无法删除存储在AWS S3中的图像

0 个答案: