文件存储操作

我将通过一个简单的示例,来演示如何在 NuxtBase 中使用 Supabase Storage 进行文件存储操作。这是 NuxtBase 内置的一个 Storage 示例,你可以在「控制台」中找到。

Storage示例

创建存储桶

在使用 Storage 之前,需要先在 Supabase 控制台创建存储桶(Bucket)。

  1. 登录 Supabase 控制台
  2. 进入 Storage 页面
  3. 点击 "Create new bucket"
  4. 输入存储桶名称,如:demo-files
  5. 选择访问权限:
    • Public:所有文件可公开访问
    • Private:需要认证才能访问文件
  6. 设置 RLS 策略为Authenticated

基础文件操作

1. 上传文件

上传文件到指定的存储桶和路径:

const { error } = await supabase.storage
  .from(BUCKET_NAME)
  .upload(filePath, file);

2. 下载文件

从存储桶中下载指定文件:

const { data, error } = await supabase.storage
  .from(BUCKET_NAME)
  .download(filePath);

3. 获取文件列表

列出存储桶中指定路径下的所有文件:

const { data, error } = await supabase.storage
  .from(BUCKET_NAME)
  .list(folderPath);

4. 删除文件

从存储桶中删除指定文件:

const { error } = await supabase.storage.from(BUCKET_NAME).remove([filePath]);

完整示例

完成示例可在@/modules/saas/dashboard/components/DashboardStorageDemo.vue中找到。

注意事项

  1. 文件大小限制
    • Supabase Storage 默认限制单个文件最大为 50MB
    • 可以在上传前检查文件大小
  2. 文件命名
    • 建议使用时间戳或 UUID 作为文件名前缀,避免重名
    • 保持文件路径结构清晰,便于管理
  3. 权限控制
    • 合理设置存储桶的访问权限
    • 使用 RLS 策略控制文件访问权限
  4. 错误处理
    • 始终处理上传、下载等操作可能出现的错误
    • 为用户提供清晰的错误反馈