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

Question

我是 Web 开发的新手（目前正在参加训练营）并且一直在努力寻找所需的资源以将上传到 Amazon S3 的内容合并到我的项目中。对于提前的含糊不清，我深表歉意。

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

我已尝试观看教程并查看各种 GitHub 回购以确定我缺少的内容，但无法找到涉及 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。您不必走那条路，javascript 可以在浏览器中使用 sdk。

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.

谢谢

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

Uploading image files to AmazonS3 using ReactJs

image-uploading

amazon-s3

reactjs

react-redux