Supabase的儲存空間 ｜ Storage in Supabase

Supabase的儲存空間封面圖

繼上篇文章後，這篇要探討的是儲存空間。

• 上篇文章Supabase的觸發器功能介紹 | Trigger in Supabase

Supabase是使用PostgreSQL作為資料庫，所以當然也具有Storage的功能，能夠儲存用戶的圖片或是檔案，一樣可以設定讀取權限相當方便，一起瞭解如何操作。

嗨歡迎閱讀我的文章！這是關於Supabase的系列文章，內容包含介紹Supabase是什麼、基本功能應用，深入了解Supabase的進階功能應用。

Storage介面

從後台的大頁籤就可以進去Storage頁面，頁面和資料庫表格有點類似，如果有新增任何buckets就會顯示在All buckets的地方。

目前還沒有新增過任何buckets，新增的方式可以從前端新增或是由面板點一點新增，那這裡就選擇直接後台點一點新增。

新增第一個bucket

點擊上面的New bucket按鈕新增。

在這裡有很多提醒事項，主要是說bucket的名字是不能更改的要特別注意，還有命名的一些限制，為了等一下測試方便下面的Public bucket這裡先打開，稍後再把RLS設定上去。

成功新增完成以後就可以在右邊看到一個類似資料夾的面板，到這裡就新增完成。

上傳第一張圖片

成功新增完成以後，丟張照片上去測試一下吧！從隨意拉一張圖片進去就可以上傳。

可以看到上傳的檔案會呈現一個列表展示，點圖的名稱的話就可以在右邊的面板上看到圖片的資訊，點擊Get URL的按鈕可以直接複製圖片，貼在任意的瀏覽器分頁上就可以直接看到圖片。

上傳的圖片可以被任何地方讀取是因為目前的bucket還沒有設定RLS的保護，接下來設定一下RLS。

設定bucket的RLS

點擊左邊的Policies按鈕可以進入設定的地方。

設定RLS的目標就以每個檔案為目標，點擊標題Other policies under storage.objects右邊的New policy按鈕新增。

Supabase提供的官方模板就很好用，適用於許多需要處理圖片和文件權限的情境。

直接新增insert的官方模板，至於讀取權限(select)這邊為了示範需要，我設定和insert模板一樣，都是需要已登入才可以瀏覽，完整的讀取權限(select)SQL如下：

CREATE POLICY "Enable select for authenticated users only" ON "storage"."objects"
AS PERMISSIVE FOR SELECT
TO authenticated
USING (true)

最後一步，回去avatar的地方按編輯，把Public bucket給關起來。

OK到這裡就設定完成，如果把剛剛複製的圖片URL再貼到瀏覽器上的話，還是看得到圖片的，是因為這張圖已經被cache住，如果上傳另一張圖就看不到囉。

正確的話會在瀏覽器裡面看到以下內容。

{
  "statusCode": "400",
  "error": "Error",
  "message": "headers must have required property 'authorization'"
}

說明沒有權限所以不能讀取圖片。

在網頁前端操作儲存空間

畫面準備

儲存空間在實務上的應用之一是儲存用戶上傳的頭像，花了點功夫準備畫面。

預計可以點選選擇檔案的按鈕後選擇圖片，完成以上就執行上傳的動作，把圖片傳到supabase的儲存空間。

程式準備

直接在註冊change事件，接著執行以下內容，其中img變數是準備用來把圖片url顯示檔案左側取代灰色區域。

const img = ref('')
const uploadImage = async (e) => {
  const file = e.target.files[0]
  const name = `avatar_${Date.now()}`
  await supabase.storage.from('avatar').upload(name, file)
  const { data: { signedUrl } } = await supabase.storage.from('avatar').createSignedUrl(name, 60)
  img.value = signedUrl
}

可以看到，在`supabase`官方SDK的協助之下，把檔案上傳至儲存空間是非常簡單的事情，只需要準備好兩個變數。

• 第一個變數：儲存的路徑。
• 第二個變數：檔案本人

就能夠把檔案完成上傳至儲存空間，並且產生一個限時可瀏覽的連結，就可以在旁邊看到圖片的呈現。

為了展示上傳儲存空間的功能，這裡特意這樣寫，但在實際應用中可能會有不同的做法，官方的SDK也還有很多細節可以調整，完整的內容可以在官方文件裡面查詢。

• Supabase Javascript Client | Upload a file

儲存空間限制

Supabase的Storage真的好用，不過要注意，目前使用的方案是免費方案，所以每個專案只有1G的儲存空間可以使用，以當今手機拍照的畫質來說，隨意塞幾張圖片就會被塞爆，所以免費方案只能當作練習使用。

總結

supabase在官方SDK的支持下，讓前端操作儲存空間變得非常輕鬆。

幾乎在SDK中，我們可以找到適用於幾乎所有操作情境的功能。唯一可惜的地方是容量限制。當然，要使用他人的儲存空間，沒有付費是不太合理的，當作練習倒是非常適合。

有興趣的內容

• Zeabur：一個讓您的服務部署變得輕而易舉的平台，無論您使用何種程式語言或開發框架，都能快速上手，釋放您的創造力！
• 六角學院的Vue直播班課程：掌握Vue 3的神秘面紗，透過專業指導和實戰練習，打造屬於您的獨特網站作品，讓您在前端開發的道路上一馬當先！