javascript - 使用 AWS 的 getObject 在浏览器中显示图像

Question

我正在使用 @aws-sdk/client-s3我正在尝试从 AWS s3 中的私有(private) 存储桶中读取图像。

在我的 NextJS 代码中，我有一个 API 应该获取图像并最终设置 src <img> 的标签在浏览器中显示它。但是我无法让它工作，而且我不确定我收到的数据。

这是检索图像的代码:

import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";

export const getObject = async () => {
    const s3Client = new S3Client({
        region: process.env.AWS_REGION,
        credentials: {
            accessKeyId: process.env.AWS_ACCESS_KEY,
            secretAccessKey: process.env.AWS_SECRET_KEY,
        },
    })
    console.log('GET OBJECT FUNC')
    try {
        // Create a helper function to convert a ReadableStream to a string.
        const streamToString = (stream) =>
            new Promise((resolve, reject) => {
                const chunks = [];
                stream.on("data", (chunk) => chunks.push(chunk));
                stream.on("error", reject);
                stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
            });

        // Get the object from the Amazon S3 bucket. It is returned as a ReadableStream.
        const data = await s3Client.send(new GetObjectCommand({
            Bucket: process.env.AWS_BUCKET,
            Delimiter: "/",
            Key: process.env.AWS_BUCKET_FOLDER + 'Screenshot from 2022-02-09 08-13-26.png'
        }));
        // return data; // For unit tests.
        // Convert the ReadableStream to a string.
        const bodyContents = await streamToString(data.Body);
        return bodyContents;
    } catch (err) {
        console.log("Error", err);
    }
};

export default async function handler(request, response) {
    if (request.method === "GET") {
        const data = await getObject()
        return response.status(200).json(data);
    } else {
        return response.status(405).end();
    }
}

这只是我截取的屏幕截图，我正在尝试重新下载。当我 console.log从 getObject 函数返回的数据，看起来像这样:

然后在前端，我有以下接收数据的函数

    const getImage = async (event) => {
        console.log('GET IMAGE')
        // console.log(event.target)
        let arrayBuffer = await axios.get("/api/get-object", {responseType: 'arraybuffer'})
        console.log(arrayBuffer.data)
        let base64 = 'data:image/png;base64,' + Buffer.from(arrayBuffer.data).toString('base64')
        console.log(base64)
        event.target.src = base64
    }

并设置图片的src。但是图像没有显示。上述函数的console.log输出为:

GET IMAGE Asset.jsx:18:16
ArrayBuffer { byteLength: 687198 }
Asset.jsx:21:16
data:image/png;base64,Iu+/vVBOR1xyXG5cdTAwMWFcblx1MDAwMFx1MDAwMFx1MDAwMFxySUhEUlx1MDAwMFx1MDAwMFx1MDAwMixcdTAwMDBcdTAwMDBcdTAwMDIrXGJcdTAwMDZcdTAwMDBcdTAwMDBcdTAwMDDvv71y77+9UVx1MDAwMFx1MDAwMFx1MDAwMFx1MDAwNHNCSVRcYlxiXGJcYnxcYmTvv71cdTAwMDBcdTAwMDBcdTAwMDBcdTAwMTl0RVh0U29mdHdhcmVcdTAwMDBnbm9tZS1zY3JlZW5zaG9077+9XHUwMDAz77+9Plx1MDAwMFx1MDAwMFx1MDAwMCp0RVh0Q3JlYXRpb24gVGltZVx1MDAwMFdlZCAwOSBGZWIgMjAyMiAwODoxMzoyOSBHTVRcdTAwMTFcYllcdTAwMDRcdTAwMDBcdTAwMDAgXHUwMDAwSURBVHjvv73UvduS77+9Ou+/vSzvv71cdTAwMDHvv71S77+92rXvv73vv71M27zvv73vv71/77+9WO+/vV4p77+9QO+/vVx1MDAwNyBA77+9XHUwMDBiVGbvv71l77+9XHUwMDBm77+9ZCnvv70gXHUwMDEw77+9e1x1MDAwNC7vv73vv73vv73PvzlcdTAwMDB477+977+9Ke+/ve+/vWFmMDNs77+9XHUwMDEz77+9XHLvv71i77+9d++/ve+/vVBKXHUwMDAxXHUwMDAwLMuCbduQc0ZKXHTvv73vv71cdTAwMTPvv73vv73vv73vv71cdTAwMWRAKVx1MDAwNTnvv71277+9fT/vv71PKe+/ve+/vWvvv71cdTAwMDBcdTAwMDAz77+977+9fu+/ve+/ve+/vVnvv73vv70677+9Ne+/ve+/ve+/vVxuM8OyLHg+77+9XHUwMDAw77+977+9M++/ve+/vSc+Pj7vv73vv71w77+9UXfvv71377+964qcM++/vX3vv73vv71cdT…

所有这些斜杠和/ve+ 在我看来都不正确，但我不知道自己做错了什么。我已经从整个堆栈溢出中尝试了大约 5 种不同的方法，但无法显示此图像。任何人都可以帮忙。

Answer 1

我认为你的问题出在这里:

stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));

这里

let base64 = 'data:image/png;base64,' + Buffer.from(arrayBuffer.data).toString('base64')

您正在将响应字符串转换为 UTF，然后在此处转换为 base64。像这样将 AWS 流更改为 base64:

stream.on("end", () => resolve(Buffer.concat(chunks).toString("base64")));

并在此处使用图像时删除解码:

let base64 = 'data:image/png;base64,' + arrayBuffer.data;