Supabase的儲存空間 | Storage in Supabase

閱讀時間約 6 分鐘
Supabase的儲存空間封面圖

Supabase的儲存空間封面圖

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

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

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

Storage介面

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

storage頁籤

storage頁籤

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

新增第一個bucket

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

新增第一個bucket

新增第一個bucket

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

儲存空間空空

儲存空間空空

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

上傳第一張圖片

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

成功上傳圖片以後可以在後台檢視檔案

成功上傳圖片以後可以在後台檢視檔案

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

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

設定bucket的RLS

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

為bucket設定RLS

為bucket設定RLS

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

supabase官方的儲存空間模板

supabase官方的儲存空間模板

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給關起來。

把公開bucket的地方關起來

把公開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也還有很多細節可以調整,完整的內容可以在官方文件裡面查詢。

儲存空間限制

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

總結

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

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

有興趣的內容

avatar-img
6會員
23內容數
沙龍新手
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
技術叢林 的其他內容
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
在前面的文章中已經在supabase中完成了基本的操作,甚至已經完成訂閱即時更新的功能,接著本篇文章要介紹的是如何在supabase裡設定與使用外來鍵,包含如何在客戶端撰寫查詢外鍵的SQL,馬上開始。如果還沒有閱讀實時更新功能文章的話可以點擊這裡去閱讀。 嗨歡迎閱讀我的文章!這是關於Supabase
在網頁裡直接監聽資料庫的變化吧! 這個聽起來需要複雜工程的事情,在supabase的幫助之下就可以解決,串接好後只要資料庫中的資料發生變化,supabase會自動把最新資料發送到前端頁面,可以讓使用者即時收到最新資訊,省去重複刷新頁面,提供使用者體驗。 在supabase中的實時更新總共有3種事件
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
本篇文章主要介紹Supabase裡的Trigger的功能,詳細說明什麼是Trigger和使用時機,以及如何在後台瀏覽和設定Trigger,此外,文章中會提供一個常用的Trigger功能範例。 善用觸發器(Trigger)的話,能夠幫助開發者減少重複執行的工作,提高資料庫效能和安全性,可以說是一個強大
這篇要介紹的是Supabase裡的Functions,我不知道有沒有官方的中文譯名,我都直接稱呼為函式或程式。Functions就是和任何程式語言裡面所認識的函式一樣,只差在這個Functions是在PostgreSQL裡面執行,沒有聽錯是在資料庫裡面執行的函式,文章會介紹新增的方式和做一個範例。
在前面的文章中已經在supabase中完成了基本的操作,甚至已經完成訂閱即時更新的功能,接著本篇文章要介紹的是如何在supabase裡設定與使用外來鍵,包含如何在客戶端撰寫查詢外鍵的SQL,馬上開始。如果還沒有閱讀實時更新功能文章的話可以點擊這裡去閱讀。 嗨歡迎閱讀我的文章!這是關於Supabase
在網頁裡直接監聽資料庫的變化吧! 這個聽起來需要複雜工程的事情,在supabase的幫助之下就可以解決,串接好後只要資料庫中的資料發生變化,supabase會自動把最新資料發送到前端頁面,可以讓使用者即時收到最新資訊,省去重複刷新頁面,提供使用者體驗。 在supabase中的實時更新總共有3種事件
在supabase裡可以直接從客戶端讀取資料庫中的資料,在設定好RLS的前提之下,更可以對資料庫直接進行新增、修改、刪除等操作。 先進到後台選擇SQL Editor,可以來到SQL編輯器的頁面,如果是本身會寫資料庫相關的SQL內容可以直接點擊上方的New query按鈕,可以開啟一個空白頁面開始編輯
在上篇文章中Supabase的JavaScript Client Library串接實作我們實際安裝並且使用了supabase-js連接我們的supabase資料庫,並且已經測試成功。本篇文章就來導覽一下supabase-js的文件,還有在頁面裡面示範會員管理系統的登入和登出,以及在客戶端的操作。嗨
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
我最近在思考關於記憶體的最佳存放,在哪裡會最好 得出來的答案 就是...必須用笨方法 但笨方法最為安全 1.定期刪除信箱和手機裡無用影片和截圖或垃圾訊息 2.定期分類自己的文件和圖檔 3.定期備份資料-放在自己常用的電腦裡或另外買隨身碟和硬碟 4.可以暫時存在雲端或GOOGLE文件
Thumbnail
Magnetic tapes是一個自古就有的技術,至今還是有企業在使用,也有不斷在被改良中。 其特性:容量大低成本保存時間長,讓其仍有利用價值,在特定的情境下可做使用,比如可作為保存歷史資料使用,例如美國NASA,政府機構等等,或作為備份使用,不過要注意其讀寫速度很慢,比固態硬碟如HDD還慢上許多
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
隨著數位資料的快速增長,存儲技術變得越來越重要。在選擇存儲設備時,許多人面臨著一個重要的抉擇,那就是固態硬盤(SSD)還是傳統硬盤驅動器(HDD)。讓我們一起來探討SSD和HDD這兩種存儲解決方案的差異以及它們對於數據存儲和性能的影響。 先讓我們介紹一下SSD。SSD是一種基於閃存技術的存儲設
Thumbnail
如果有批量的重複資料,需要將重複的內容合併儲存格,有什麼方式會比較快呢? 其實只要配合一點函數就能快速將重複的內容合併囉!! 趕快來看影片教學吧,看影片前可以先下載練習檔,做中學,學中做學習效果最好唷。 檔案下載 函數說明: C2=IF(B2=B1,C1,IF(C1=1,"A",1))
Thumbnail
👨‍💻簡介 在 Go 語言中,有著一個強大又便捷的工具,可以讓你以鍵-值(Key-Value)的形式儲存和查詢資料,它就是「Map」。Map 在 Go 語言中扮演了重要的角色,簡化了許多資料處理的任務,現在讓我們一起來深入了解這個有趣的資料型別。 Map的基本概念 Map 是 Go 語
Thumbnail
有網友提問,想要標示到期日,不囉嗦直接拍一個可以顯示指定日期的教學 操作順序如下文字說明 選取資料範圍 常用 條件式格式設定 自訂 輸入=日期那欄的參照(列不要鎖)=指定日期(絕對參照) 設定一個自己喜歡的格式 完成 如果不清楚絕對參照看這篇 文字如果看得有點模糊,就來看影片版,我做一步你做一步學
Thumbnail
資料中如果姓名有些三個字有些兩個字,老闆又有強迫症說一定要對齊,該如何做呢? 覺得分享有幫助到你在工作上提升效率,可以贊助我請我喝杯咖啡唷,也可以訂閱EXCEL設計新思維,可以看到更多增加效率的好方法唷~ 職場上有相關問題,加入我的line社群討論唷~ 追蹤我的IG 追蹤我的粉絲團 追蹤我的Dcar
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
我最近在思考關於記憶體的最佳存放,在哪裡會最好 得出來的答案 就是...必須用笨方法 但笨方法最為安全 1.定期刪除信箱和手機裡無用影片和截圖或垃圾訊息 2.定期分類自己的文件和圖檔 3.定期備份資料-放在自己常用的電腦裡或另外買隨身碟和硬碟 4.可以暫時存在雲端或GOOGLE文件
Thumbnail
Magnetic tapes是一個自古就有的技術,至今還是有企業在使用,也有不斷在被改良中。 其特性:容量大低成本保存時間長,讓其仍有利用價值,在特定的情境下可做使用,比如可作為保存歷史資料使用,例如美國NASA,政府機構等等,或作為備份使用,不過要注意其讀寫速度很慢,比固態硬碟如HDD還慢上許多
Thumbnail
前面文章有說明過訂閱資料庫的更新事件,讓前端畫面能夠收到更新資訊即時反應在用戶面前,那接下來要介紹Supabase的Webhooks則是能讓其他server端收到資料庫事件的通知。 這裡簡單說明一下Webhooks,一般來說是由前端主動呼叫後端API,取回資料,Webhooks則是由後端伺服器觸發某
Thumbnail
本篇文章又要介紹Supabase好用的實時更新功能,叫做Presence。Presence是 Supabase 提供的一項實時更新功能,讓開發者能夠輕鬆實現用戶之間的實 嗨歡迎閱讀我的文章!這是關於Supabase的系列文章,內容包含介紹Supabase是什麼、基本功能應用,深入了解Supa
Thumbnail
Supabase是使用PostgreSQL作為資料庫,所以當然也具有Storage的功能,能夠儲存用戶的圖片或是檔案,一樣可以設定讀取權限相當方便,一起瞭解如何操作。 從後台的大頁籤就可以進去Storage頁面,頁面和資料庫表格有點類似,如果有新增任何buckets就會顯示在All buckets的
Thumbnail
隨著數位資料的快速增長,存儲技術變得越來越重要。在選擇存儲設備時,許多人面臨著一個重要的抉擇,那就是固態硬盤(SSD)還是傳統硬盤驅動器(HDD)。讓我們一起來探討SSD和HDD這兩種存儲解決方案的差異以及它們對於數據存儲和性能的影響。 先讓我們介紹一下SSD。SSD是一種基於閃存技術的存儲設
Thumbnail
如果有批量的重複資料,需要將重複的內容合併儲存格,有什麼方式會比較快呢? 其實只要配合一點函數就能快速將重複的內容合併囉!! 趕快來看影片教學吧,看影片前可以先下載練習檔,做中學,學中做學習效果最好唷。 檔案下載 函數說明: C2=IF(B2=B1,C1,IF(C1=1,"A",1))
Thumbnail
👨‍💻簡介 在 Go 語言中,有著一個強大又便捷的工具,可以讓你以鍵-值(Key-Value)的形式儲存和查詢資料,它就是「Map」。Map 在 Go 語言中扮演了重要的角色,簡化了許多資料處理的任務,現在讓我們一起來深入了解這個有趣的資料型別。 Map的基本概念 Map 是 Go 語
Thumbnail
有網友提問,想要標示到期日,不囉嗦直接拍一個可以顯示指定日期的教學 操作順序如下文字說明 選取資料範圍 常用 條件式格式設定 自訂 輸入=日期那欄的參照(列不要鎖)=指定日期(絕對參照) 設定一個自己喜歡的格式 完成 如果不清楚絕對參照看這篇 文字如果看得有點模糊,就來看影片版,我做一步你做一步學
Thumbnail
資料中如果姓名有些三個字有些兩個字,老闆又有強迫症說一定要對齊,該如何做呢? 覺得分享有幫助到你在工作上提升效率,可以贊助我請我喝杯咖啡唷,也可以訂閱EXCEL設計新思維,可以看到更多增加效率的好方法唷~ 職場上有相關問題,加入我的line社群討論唷~ 追蹤我的IG 追蹤我的粉絲團 追蹤我的Dcar