Object URL

基本定義

Object URL(MDN定義名稱) 又稱 Blob URL(W3C定義名稱)，是HTML5中的新標準。
Object URL是一個用來表示物件的URL，這個物件通常是特定的File object 或 Blob Object。
Object URL的儲存機制是利用GUID向瀏覽器提取檔案物件，格式為

GUID

GUID = Globally Unique Identifier(全域唯一識別碼)。是一種由演算法生成的唯一標識，通常表示成32個16進位數字（0－9，A－F）組成的字串
Ex. 21EC2020-3AEA-1069-A2DD-08002B30309D
資料來源：wiki

生命週期

• Object URL只能在瀏覽器內部生成。
• 這個URL的生命週期和創建它的window和document一致。其實就是把整個網站關閉，這個檔案物件的生命週期才會結束，否則它會一直存在。

支援度

https://caniuse.com/?search=createObjectURL

相關方法

File API中，定義了global的object:URL，它包含了兩個方法：createObjectURL()和 revokeObjectURL()

createObjectURL()

透過createObjectURL，可以接收一個File 或 Blob objet，並回傳一段URL。這個URL就是瀏覽器建立關聯到本地端檔案的連結。

程式範例

index.html

<input type="file" @change="updateFile">

customize.js (用vue.js中的methods)

updateFile(e){
    let [_file] = e.target.files;
    console.log('open file', e.target.files)
    console.log('_file',_file);
    let _url = window.URL.createObjectURL(_file);
    console.log('_url',_url);
}

把createObjectURL的URL貼到網址列上，就可以看到原圖（哇！是可愛的小小兵～～）

revokeObjectURL()

釋放createObjectURL()創建的已存在的URL。當已經完成Object URL的使用並且不希望瀏覽器保留對該檔案時，將會用到此方法

window.URL.revokeObjectURL(objectURL);

常見的應用

預覽圖檔

透過Object URL，圖檔不需要傳到後端即可透過Object URL預覽。

Data URI

Data URI (統一資源標識符) = Uniform Resource Identifier

基本定義

Data URI 是一種檔案格式，主要是由base64編碼之後，將檔案轉換成文字的方式來儲其資料。

• mime type：
  支援的格式如下：

    text/plain,
    text/html,
    text/html;base64,
    text/css,
    text/css;base64,
    text/javascript,
    text/javascript;base64,
    image/gif;base64,
    image/png;base64,
    image/jpeg;base64,
    image/x-icon;base64
  

• ;base64 ： 數據編碼方式，這邊是base 64的編碼方式
• encoded data

範例如下

為什麼要使用Data URI (優點)

1. 在前端的畫面上因為是文字，所以可以將整個檔案資料寫進HTML或CSS中，不需要在有額外的請求，減少request

Data URI的缺點

1. 無法快取：因為Data URI是將檔案轉換成文字後放在網頁，不像另外載入的檔案，可以經過快取增加之後的速度
2. 後續維護不方便：
   • 如果要換圖或改圖，就要把圖片再重新轉化成Data URI後再更換整段URI的資料，維護圖檔不像圖檔取代這樣方便又快速。必須要動到原本的程式碼
   • 易讀性不如一般的檔案好

常見的應用

將圖片嵌入網頁上

使用 Object URL 和 Data URI的時機

Object URL和 Data URI一樣都可以把圖檔透過前端轉換成可以preview的狀態。但Data URI會需要透過整個檔案的轉換之後才能做到preview；而Objet URL則是透過URL參考到本地的檔案做顯是。所以如果是在圖檔預覽的部分，其實可以考慮用Object URL會更為簡潔方便

參考資料

https://medium.com/cubemail88/data-uri-%E5%89%8D%E7%AB%AF%E5%84%AA%E5%8C%96-d83f833e376d