文件存储操作
我将通过一个简单的示例,来演示如何在 NuxtBase 中使用 Supabase Storage 进行文件存储操作。这是 NuxtBase 内置的一个 Storage 示例,你可以在「控制台」中找到。
创建存储桶
在使用 Storage 之前,需要先在 Supabase 控制台创建存储桶(Bucket)。
- 登录 Supabase 控制台
- 进入 Storage 页面
- 点击 "Create new bucket"
- 输入存储桶名称,如:
demo-files
- 选择访问权限:
- Public:所有文件可公开访问
- Private:需要认证才能访问文件
- 设置 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
中找到。
注意事项
- 文件大小限制
- Supabase Storage 默认限制单个文件最大为 50MB
- 可以在上传前检查文件大小
- 文件命名
- 建议使用时间戳或 UUID 作为文件名前缀,避免重名
- 保持文件路径结构清晰,便于管理
- 权限控制
- 合理设置存储桶的访问权限
- 使用 RLS 策略控制文件访问权限
- 错误处理
- 始终处理上传、下载等操作可能出现的错误
- 为用户提供清晰的错误反馈