如何获取OpenAI API返回的图片并上传至Supabase Storage？

你当前的核心问题是Base64字符串没有正确转换成Supabase Upload接口能接受的二进制数据格式，直接用decode()处理Base64是错误的，得把Base64解码成Uint8Array或者Blob类型才行。

修正后的完整代码如下：

const configuration = new Configuration({
    apiKey: OpenAIApiKey,
});
const openai = new OpenAIApi(configuration);
const response = await openai.createImage({
    prompt: prompt,
    size: "512x512",
    response_format: "b64_json",
});

console.log("Uploading image...");

// 关键步骤：把Base64字符串转成Uint8Array
const base64Str = response.data.data[0].b64_json;
const binaryStr = atob(base64Str);
const uint8Arr = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
}

const { data, error } = await supabase.storage
    .from("public/posts")
    .upload(fileName, uint8Arr, {
        contentType: "image/png",
    });

if (error) {
    throw new Error(`Failed to upload image: ${error.message}`);
}

关键逻辑说明 #

• 用atob()把Base64字符串解码成原始二进制字符串
• 把二进制字符串转成Uint8Array——这是Supabase Upload接口支持的二进制数据类型，直接传入就能正常识别

你也可以选择转成Blob类型上传，代码如下：

// 转换为Blob
const imageBlob = new Blob([uint8Arr], { type: "image/png" });
// 上传Blob
const { data, error } = await supabase.storage.from("public/posts").upload(fileName, imageBlob, { contentType: "image/png" });

内容的提问来源于stack exchange，提问作者Globe