我在后端（nodejs，express）通過 GetObjectCommand 獲取影像，然后傳遞給前端（react）我想用 img 標簽顯示影像但資料很奇怪！！！
我可以在郵遞員中看到它：
但在控制臺中：
我應該將它轉換成什么以及如何轉換？我嘗試了很多解決方案（arraybuffer，FileReader，...），但沒有一個奏效。我的后端代碼有問題嗎？
后端：
const retrieveFile = asyncHandler(async (req, res) => {
try {
const param = {
Bucket: 'my-bucket',
Key: req.params.id,
};
const data = await s3.send(new GetObjectCommand(param));
data.Body.pipe(res); //---------------------> image sent to frontend
} catch (err) {
res.json('Error', err);
}
});
前端：
const [imgFromStorage, setImgFromStorage] = useState('');
const getImageFromStorage = async () => {
try {
const { data } = await axios.get(
'/api/storage/retrievefile/sadcat.jpg'
);
setImgFromStorage(data); //------------------------> image received from backend
} catch (err) {
console.error(err);
}
};
.
.
.
<img alt='myimg' src={imgFromStorage} /> //------------------> show image
uj5u.com熱心網友回復：
最后我找到了方法
后端：
const retrieveFile = asyncHandler(async (req, res) => {
try {
const param = {
Bucket: 'my-bucket',
Key: req.params.id,
};
const data = await s3.send(new GetObjectCommand(param));
const { Body } = await s3.send(new GetObjectCommand(param));
res.writeHead(200, {
'Content-Type': 'image/jpeg; charset=UTF-8',
});
Body.pipe(res); //---------------------> image sent to frontend
} catch (err) {
res.json('Error', err);
}
});
前端：
function blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = function (e) {
callback(e.target.result);
};
a.readAsDataURL(blob);
}
const [imgFromStorage, setImgFromStorage] = useState('');
const getImageFromStorage = async () => {
try {
await axios
.get('/api/storage/retrievefile/sadcat.jpg', {
responseType: 'blob',
})
.then((response) => {
blobToDataURL(response.data, function (dataurl) {
setImgFromStorage(dataurl);
});
});
} catch (err) {
console.error(err);
}
};
.
.
.
<img alt='myimg' src={imgFromStorage} /> //------------------> show image
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400241.html
標籤：javascript 图片 亚马逊-s3 公理 源文件