Lộ trình cá nhânBuild Website Động cùng AI & Supabase: Full-Stack Web App, Auth, Database & Thanh toán Tự động
6/8

Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0630phút ước tínhThực chiến · Builder

6. Quản Lý File & Hình Ảnh Trên Supabase Storage CDN: Tối Ưu Tải Trang & Bảo Mật

Xây dựng chức năng upload ảnh đại diện, hóa đơn, tài liệu đính kèm lên Cloud Storage CDN với thanh tiến trình tải lên mượt mà.

📁 Cấu Trúc Storage Bucket

  • Public Bucket: Dành cho ảnh đại diện, ảnh bài viết, banner công khai.
  • Private Bucket: Dành cho hợp đồng, sao kê, hóa đơn tài chính (chỉ người có thẩm quyền mới tạo được Signed URL để tải file có thời hạn).
example.py
// uploadFile.ts
export async function uploadInvoice(file: File, orderId: string) {
  const fileExt = file.name.split('.').pop();
  const fileName = `${orderId}_${Date.now()}.${fileExt}`;
  const filePath = `invoices/${fileName}`;

  const { data, error } = await supabase.storage
    .from('private_documents')
    .upload(filePath, file, { cacheControl: '3600', upsert: false });

  if (error) throw error;
  return filePath;
}
Thực hành

Thực hành và tự đánh giá

Tạo một bucket avatars trên Supabase, viết component React cho phép người dùng tải ảnh đại diện và lưu đường dẫn vào bảng profiles.

⚖️ Bản quyền sở hữu trí tuệ: © 2026 AI Tinh Gọn (aitinhgon.vn) · Giấy phép Creative Commons CC BY-NC-ND 4.0. Cho phép tự học cá nhân, nghiêm cấm thương mại hóa hoặc bán lại. Giáo trình mở →

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.