使用存储 API 将图像上传到 Supabase 存储答案

【问题标题】：Upload Image to Supabase Storage Using Storage APIs使用存储 API 将图像上传到 Supabase 存储
【发布时间】：2021-09-13 19:41:41
【问题描述】：

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

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

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

请帮帮我。

【问题讨论】：

这个答案可能会有所帮助：stackoverflow.com/a/36183085/196834

标签： request postman supabase

【解决方案1】：

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

我听到了你的痛苦。您可以尝试this 技术将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 的变量。

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

你可以在这里获取 supbase-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
  })

【讨论】：

我正在使用 AppSmith 创建一个仪表板，其中上传图像的用例失败，因为 AppSmith 刚刚为我提供了一个 base64 值，我只能选择向 /storage 端点发出 POST 请求我的超级数据库实例。结果，我不得不从 Appsmith 切换到在 Next.js 中完全编写自己的仪表板。我觉得我做出了正确的决定，因为 Next.js + Supabase 确实想知道。 appsmith（低代码平台）有时也会崩溃。无论如何，非常感谢您的建议。
@MANISHAGRAWAL 很高兴听到您一切顺利！