1. 背景

在一些安全場景，或者一些本地化的場景（如本地化的 Markdown 記事本），如果有圖片上傳并需要查看的場景，在不上傳到服務器的情況下，實現(xiàn)這個效果，通常是把圖片 Base64 化，但編碼后的字符串會非常長，體驗較差。

這里不妨嘗試使用 ServiceWorker + IndexedDB 來解決這個問題。

2. API 優(yōu)勢

IndexedDB 幾乎什么都可以存儲，二進制類的文件更不在話下，且存儲空間在大多數(shù)瀏覽器中，是和系統(tǒng)空間持平的。

ServiceWorker 可以做頁面的網(wǎng)絡代理層，所以就不需要 Base64 化了，可以直接寫一個特定規(guī)則的圖片地址，實現(xiàn)從 IndexedDB 中 讀/寫 文件。

3. 實現(xiàn)

例如把這種特殊的圖片采用 .dbimg 后綴。

上傳圖片時，就可以通過攔截上傳請求的方式實現(xiàn)，流程如下：

self.addEventListener("fetch", (e) => {const url = e.request.url;if (e.request.method == "POST" && url.indexOf("update-img") > -1) {e.respondWith(e.request.formData().then((data) => {const file = data.get("img");const name = Date.now() + Math.random().toString().substr(2, 4);db.put("img", { name, file });return new Response(JSON.stringify({name: name + ".dbimg",}));}));} });

讀取時，通過判斷 .dbimg 后綴實現(xiàn)，流程如下：

self.addEventListener("fetch", (e) => {const url = e.request.url;if (e.request.method == "GET" && url.substr(url.length - 6) == ".dbimg") {const name = url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."));e.respondWith(db.getAllMatching("img", { index: "name", query: IDBKeyRange.only(name) }).then((data) => {if (data.length) {return new Response(data[0].file);}return new Response("", { status: 404 });}));} });

4. 效果

體驗地址：https://lecepin.github.io/file-proxy-indexedDB/

? 倉庫地址：https://github.com/lecepin/file-proxy-indexedDB

? 原文地址

總結(jié)

以上是生活随笔為你收集整理的实现图片本地化 ServiceWorker + IndexedDB的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。