DAY13 - 档案类的物件关系厘清(2) - Object URL, Data URI

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