Question

我对网络开发相当陌生（目前正在注册一个训练营）并且很难找到所需的资源，以便在我的项目中将上传整合到Amazon S3。我提前为这种含糊不清道歉。

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

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

我尝试过使用'aws-nodejs-sample'remo，'themetoerchef / uploaded-with-react'repo，看过youTube教程，我看了一下FineUploader并且已经阅读了react-S3-uploader npm文件但无法连接点。此外，我在我的.env文件中包含了我的AWS访问密钥，并尝试使用查询字符串来访问S3存储桶。

有更好的方法可以解决这个问题，还是有其他方法可以在S3之外使用反应上传？

Answer 1

转到您的项目目录并运行

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加载密钥和机密。谢谢

Answer 2

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

Check this aws link for more

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

2 个答案: