拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 如何显示存盘在awss3存盘桶上的产品影像

如何显示存盘在awss3存盘桶上的产品影像

白鹭 - 2022-03-08 1976 0 0

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

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

这就是我试图在我的反应应用程序上获取它们的方式//其余资料来自 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>
})
}

因为它从 db 获取 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

uj5u.com热心网友回复:

您的代码似乎正在向后端发送影像请求,后端从 Amazon S3 检索物件,然后提供影像以回应请求。

更好的方法是让 HTML 页面中的 URL直接指向存盘在 Amazon S3 中的影像。这将是高度可扩展的,并将减少您的 Web 服务器上的负载。

这将要求影像是公开的,以便用户的网络浏览器可以检索影像。最简单的方法是添加一个授予所有用户访问权限存盘桶策略GetObject

或者,如果您不希望将存盘桶公开,您可以改为生成Amazon S3 预签名 URL,它们是提供对私有物件的临时访问的限时 URL。您的后端可以使用几行代码计算预签名 URL,然后用户的 Web 浏览器将能够从 S3 检索私有物件以显示在页面上。

uj5u.com热心网友回复:

在处理博客的影像上传功能时,我进行了类似的 S3 影像处理,但我没有使用 getFileStream() 来上传我的影像。

因为在影像档案被完全处理之前什么都不应该做,所以我用它fs.readFile(path, callback)来读取资料。

我的方式将生成缓冲区资料,但 AWS S3 足够聪明,知道将其截获为影像。(我只在我的文件名中添加了后缀,我不知道如何应用影像标题......)

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

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
        }
}
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *