使用 ReactJs 将图像文件上传到 AmazonS3

Question

我对 Web 开发相当陌生（目前正在参加训练营），并且一直在努力寻找所需的资源，以便在我的项目中整合上传到 Amazon S3。对于之前的含糊之处，我深表歉意。

我目前有一个 React 应用程序从我的 AmazonS3 帐户中提取图像，但我打算让用户能够上传到我的存储桶并在我的网站上使用/查看图像。

我曾尝试观看教程并查看各种 GitHub Repo 以确定我缺少什么，但无法找到涉及 React、JSX 和 Javascript 的教程。 （我见过 jquery、PHP 等）。最终，我知道这项任务很困难，我愿意投入工作，但觉得有必要询问是否有人知道可以帮助我的有用资源？

我尝试使用“aws-nodejs-sample”存储库、“themetoerchef/uploading-with-react”存储库、观看了 YouTube 教程、查看了 FineUploader 并阅读了 react-S3-uploader npm文件，但无法连接点。此外，我已将我的 AWS 访问密钥包含在我的 .env 文件中，并尝试制作查询字符串来访问 S3 存储桶。

有没有更好的方法来解决这个问题，或者是否有其他方法可以在 S3 之外使用可能有用的 react 上传？

Answer 1

要从浏览器上传到 s3，您需要从 aws sdk 获取 signedUrl，这是 aws 验证您身份的方式。在我的上一个应用程序中，我使用 skd for nodejs 来生成 signedUrl 并将其传递给我的前端应用程序以用于将文件推送到 s3。你不必走那条路，有一个 sdk 可供浏览器中的 javascript 使用。

Check this aws link for more

Answer 2

进入你的项目目录并运行

npm install --save react-aws-s3

https://www.npmjs.com/package/react-aws-s3 并根据 NPM 文档在组件中添加代码

import S3 from 'react-aws-s3';
const config = {
    bucketName: 'myBucket',
    dirName: 'media', /* optional */
    region: 'eu-west-1',
    accessKeyId: 'JAJHAFJFHJDFJSDHFSDHFJKDSF',
    secretAccessKey: 'jhsdf99845fd98qwed42ebdyeqwd-3r98f373f=qwrq3rfr3rf',
    s3Url: 'https:/your-custom-s3-url.com/', /* optional */
}
 
const ReactS3Client = new S3(config);
/*  Notice that if you don't provide a dirName, the file will be automatically uploaded to the root of your bucket */
 
/* This is optional */
const newFileName = 'test-file';
 
ReactS3Client
    .uploadFile(file, newFileName)
    .then(data => console.log(data))
    .catch(err => console.error(err))
 
  /**
   * {
   *   Response: {
   *     bucket: "myBucket",
   *     key: "image/test-image.jpg",
   *     location: "https://myBucket.s3.amazonaws.com/media/test-file.jpg"
   *   }
   * }
   */
});

现在一切都完成了，请确保从 Process ENV 加载您的密钥和秘密。

注意：如果您看到 corse 错误，请不要忘记在 AWS 存储桶上添加 CORS 策略，请参阅此处的详细信息example。

谢谢