我正在練習本教程 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
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405270.html
標籤：
上一篇：多站點上的URL引數處理不正確