如何显示存储在 aws s3 存储桶中的产品图像

Question

我正在练习本教程 https://www.youtube.com/watch?v=NZElg91l_ms&t=1234s

它对我来说绝对是一种魅力，但问题是我正在存储产品图像，我将它们存储在存储桶中，假设我上传了 4 张图像，它们都已上传。但是当我显示它们时，我收到拒绝访问错误，因为我正在显示列表并且重复请求可能将其检测为垃圾邮件

这就是我试图在我的 React 应用程序上获取它们的方式 //其余数据来自mysql数据库（产品名称，价格） //100+ 产品

{ products.map((row)=>{

<div className="product-hero"><img src=`http://localhost:3909/images/${row.imgurl}`</div>
<div className="text-center">{row.productName}</div>
})
}

因为它从数据库中获取了 100 多个产品并从 aws 中获取了 100 个图像，所以它失败了

很抱歉提出如此详细的问题，但简而言之，我如何才能从我的存储桶中获取所有产品图片

注意我知道我每次调用只能获取一张图像，所以如何在我的场景中一张一张地获取所有图像

//下载我的代码app.js

const { uploadFile, getFileStream } = require('./s3')

const app = express()

app.get('/images/:key', (req, res) => {
  console.log(req.params)
  const key = req.params.key
  const readStream = getFileStream(key)

  readStream.pipe(res)
})

//s3文件

// uploads a file to s3
function uploadFile(file) {
  const fileStream = fs.createReadStream(file.path)

  const uploadParams = {
    Bucket: bucketName,
    Body: fileStream,
    Key: file.filename
  }

  return s3.upload(uploadParams).promise()
}
exports.uploadFile = uploadFile


// downloads a file from s3
function getFileStream(fileKey) {
  const downloadParams = {
    Key: fileKey,
    Bucket: bucketName
  }

  return s3.getObject(downloadParams).createReadStream()
}
exports.getFileStream = getFileStream

Answer 1

我在处理我博客的图片上传功能时做了类似的 S3 图像处理，但我没有使用 getFileStream() 来上传我的图片。

因为在图像文件完全处理之前什么都不应该做，所以我使用 fs.readFile(path, callback) 来读取数据。

我的方法将生成缓冲区数据，但 AWS S3 足够聪明，知道将其作为图像拦截。 (我只是在文件名中添加了后缀，我不知道如何应用图像headers...)

这是我的部分代码供参考：

fs.readFile(imgPath, (err, data) => {
        if (err) { throw err }
        // Once file is read, upload to AWS S3
        const objectParams = {
          Bucket: 'yuyuichiu-personal',
          Key: req.file.filename,
          Body: data
        }
        S3.putObject(objectParams, (err, data) => {
          // store image link and read image with link
        }
}

Answer 2

您的代码似乎正在向您的后端发送图像请求，后端从 Amazon S3 检索对象，然后提供图像以响应请求。

更好的方法是让 HTML 页面中的 URL 直接指向存储在 Amazon S3 中的图像。这将是高度可扩展的，并且会减少您的网络服务器上的负载。

这将要求图像为 public，以便用户的 Web 浏览器可以检索图像。最简单的方法是添加一个 桶策略 授予所有用户 GetObject 访问权限。

或者，如果您不想创建存储桶 public，您可以生成 Amazon S3 pre-signed URLs，它们是有时间限制的 URLs，提供对私有的临时访问目的。您的后端可以使用几行代码计算预签名 URL，然后用户的 Web 浏览器将能够从 S3 检索私有对象以显示在页面上。

如何显示存储在 aws s3 存储桶中的产品图像

How to display images of products stored on aws s3 bucket

amazon-s3

amazon-web-services

node.js

reactjs