如何从反应前端将文件上传到 AWS S3 存储桶

Question

您好，我正在尝试从我的 react 前端上传图片，但它无法读取 axios 中的文件并且图片没有上传。

这是我的代码。

 <form onSubmit={Upload}>
        <input
          type='file'
          onChange={(e) => {
            generate(e.target.files);
          }}
        />
        <button type='submit'>Submit</button>
      </form>

const generate = async (data) => {
    const payload = {
      entity: 'test',
      userId: '200',
      documentFileName: data[0].name,
      action: 'putObject',
    };
    console.log('DAATA', data[0].name);
    await api
      .generatePreSignedUrl(payload, token)
      .then((res) => {
        setUploadUrl(res.data.data);
        setImageData(data);
      })
      .catch((err) => {
        console.log('Error', err);
      });
  };



 const Upload = async (e) => {
    e.preventDefault();
    console.log('IMAGEdata', imageData);
    console.log('URL', uploadUrl);
    let file = imageData[0];
    console.log('THIS IS FILE', file);
    console.log('FILENAME', file.name);
    console.log('FIELETYPE', file.type);
    var options = {
      headers: {
        'Content-Type': file.type,
      },
    };
    await axios
      .put(uploadUrl, file, options)
      .then((res) => {
        console.log('Response from s3');
        console.log(res);
      })
      .catch((error) => {
        alert('ERROR ' + JSON.stringify(error));
      });
  };

这里的 imageUrl 是我用来上传文件的签名 URL。我可以成功调用 put 请求来上传文件，但图像或文件没有被读取和上传。

这是我尝试查看上传文件时的响应。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>documents/ama/test/200/displaypicture.png</Key>
<RequestId>R7M63AHQKDNC6NH5</RequestId>
<HostId>3u8Jb8Ev4S1s/ODicL3Py4hvrvwKKOs/5zGxUEDYORfN1+U37Zx8PfYvIcGWUIAfeCqHpWqXd8o=</HostId>
</Error>

Answer 1

查看适用于 JavaScript 的 AWS 开发工具包开发指南第 3 版。有一些示例展示了如何将照片上传到 Amazon S3 存储桶。

Uploading photos to Amazon S3 from a browser

Answer 2

使用此节点模块实现此目的的一种非常简单的方法： https://www.npmjs.com/package/react-aws-s3 https://medium.com/@steven_creates/uploading-files-to-s3-using-react-js-hooks-react-aws-s3-c4c0684f38b3 enter image description here

npm install --save react-aws-s3