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

有興趣的內容

6會員
23內容數
沙龍新手
留言0
查看全部
發表第一個留言支持創作者!
技術叢林 的其他內容
本篇文章主要介紹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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
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