request - 使用存储 API 将图像上传到 Supabase 存储

Question

Supabase很棒！我正在尝试使用 POST 请求将图像上传到公共存储桶<SUPABASE_URL>/storage/v1/object/<BUCKET_NAME>/<IMAGE_NAME>。

困难在于我只有 base64 编码的图像字符串，我无法成功向上述端点发出请求。尝试了多次设置 Content-type 但没有运气。

我正在尝试从 Appsmith 上传我的图像，该图像为我必须到达上述端点的图像提供 base64 格式。

请帮帮我。

Answer 1

我很高兴能找到另一个像我这样的 Supabase 粉丝！

我听到你的痛苦。您可以尝试这种技术将 base 64 字符串转换为 blob 对象吗？

const byteCharacters = atob(b64Data);

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);

const blob = new Blob([byteArray], {type: contentType});        

最后的 blob 变量是您可以用来上传到 Supabase 的变量。

另外，您是否考虑过使用 Supbase-js SDK？这将使您的生活更轻松，因为它们提供了更好的 API 来与 Supabase 交互。

你可以在这里获取 supabase-js 包： https ://www.npmjs.com/package/@supabase/supabase-js

你可以在这里找到一些示例代码： https ://supabase.io/docs/reference/javascript/storage-from-upload

在您的情况下，您可以执行以下操作来上传文件：

const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/sample.png', blob, {
    cacheControl: 3600,
    upsert: false
  })