[TOC] # file > 通常情況下， File 對象是來自用戶在一個`<input>`元素上選擇文件后返回的`FileList`對象,也可以是來自由拖放操作生成的`DataTransfer`對象，繼承于`Blob`  * name：文件名，該屬性只讀。 * size：文件大小，單位為字節，該屬性只讀。 * type：文件的 MIME 類型，如果分辨不出類型，則為空字符串，該屬性只讀。 * lastModified：文件的上次修改時間，格式為時間戳。 * lastModifiedDate：文件的上次修改時間，格式為 Date 對象實例。 # blob > 一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。Blob表示的數據不一定是一個JavaScript原生格式。 File 接口基于Blob，繼承 blob功能并將其擴展為支持用戶系統上的文件。 ## blob URL 關于`download`屬性還有介紹： > 盡管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用戶下載使用 JavaScript 生成的內容（例如使用在線繪圖 Web 應用程序創建的照片）。 `Blob`（Binary Large Object）即二進制大對象，這個我們并不陌生，一些數據庫將Blob用來表示存儲二進制文件的字段類型。File 接口也是基于 Blob，繼承了 Blob 的功能并將其擴展使其支持用戶系統上的文件。Blob 對象通過 Blob 構造函數來創建： > Blob(blobParts\[, options\]) ~~~text var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); ~~~ 如果需要實現一些簡單的文本或 JS 字符串之類的文件下載，可以通過將文本信息轉成 blob 二進制流，生成一個 Blob URL，配合`download`屬性完成下載，代碼如下。 ~~~js const downloadText = (text, filename = '') { const a = document.createElement('a') a.download = filename const blob = new Blob([text], {type: 'text/plain'}) // text指需要下載的文本或字符串內容 a.href = window.URL.createObjectURL(blob) // 會生成一個類似blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf 這樣的URL字符串 document.body.appendChild(a) a.click() a.remove() } ~~~ 這種 Blob URL 與常見的 HTTP URL 有什么區別呢？ > Blob URL / Object URL是一種偽協議，可以讓Blob和File對象用作圖像和二進制數據下載鏈接等URL源。 瀏覽器在內部通過`URL.createObjectURL()`創建一個對 Blob 或 File 對象的特殊引用，生成的 Blob URL 只能在瀏覽器本地的單個實例和同一會話中使用，并且這個 URL 對象會在頁面退出的時候被瀏覽器釋放。 因此 Blob URL**并不能指向一個服務器資源**，你無法在其它頁面中打開它。同時由于編碼格式有所差別，Blob URL 比起 Data URLs 所占的空間資源更少，性能也更好。 Blob 為 Web 開發提供了一個非常有用的功能：創建 Blob URL。將二進制數據封裝為 Blob 對象，然后使用`URL.createObjectURL()`生成 Blob URL，由于Blob URL本身就是一個同源URL，可以使用該 URL 配合`download`解決跨域資源的下載以及命名問題。 ### 解決方案 通過 Blob 和 Fetch 可以解決跨域和文件命名的問題：使用`fetch`獲取跨域資源返回一個blob 對象并生成一個 Blob URL，配合`<a>`標簽的`download`屬性觸發下載，代碼如下： ~~~js function download(href, filename = '') { const a = document.createElement('a') a.download = filename a.href = href document.body.appendChild(a) a.click() a.remove() } function downloadFile(url, filename='') { fetch(url, { headers: new Headers({ Origin: location.origin, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) download(blobUrl, filename) window.URL.revokeObjectURL(blobUrl) }) } ~~~ 此時可以正常的將跨域圖片下載到本地了。 需注意的是跨域資源所在的服務器需要配置`Access-Control-Allow-Origin`信息，否則會得到一個大寫的跨域報錯。header 配置例如： ~~~text // 允許任何域名訪問 header('Access-Control-Allow-Origin: *'); //指定域名訪問 header('Access-Control-Allow-Origin: https://h5.ele.me'); ~~~ 目前這種方法還存在一些不足，例如瀏覽器會限制 Blob 數據大小不超過500M，在性能方面也會有所不足。 ## 預覽文件 ~~~ <input type="file" onchange=onUpload2(this.files[0])> <div id="preview2"></div> function onUpload2(file) { var blob = new Blob([file]) // 文件轉化成二進制文件 var url = URL.createObjectURL(blob);//轉化成url if (/image/g.test(file.type)) { var img = document.createElement('img') img.src = url img.onload = function (e) { console.log(this.src) URL.revokeObjectURL(this.src); // 釋放createObjectURL創建的對象 } document.getElementById('preview2').appendChild(img) } if (/video/g.test(file.type)) { var video = document.createElement('video') video.controls = true video.src = url document.getElementById('preview2').appendChild(video) video.onload = function (e) { URL.revokeObjectURL(this.src); // 釋放createObjectURL創建的對象 } } } ~~~ # FileReader FileReader用來讀取file或blob文件數據，基于文件大小不同，讀取的過程為異步。 ## 屬性 * FileReader.error 一個DOMException，表示在讀取文件時發生的錯誤 。 * FileReader.readyState 表示FileReader狀態的數字。取值如下： | 常量名 | 值 | 描述 | | --- | --- | --- | | EMPTY | 0 | 還沒有加載任何數據 | | LOADING | 1 | 數據正在被加載 | | DONE | 2 | 已完成全部的讀取請求 | * FileReader.result 文件的內容。該屬性僅在讀取操作完成后才有效，數據的格式取決于使用哪個方法來啟動讀取操作。 ## 事件 * FileReader.onload 處理load事件。該事件在讀取操作完成時觸發。 * FileReader.onloadend 處理loadend事件。該事件在讀取操作結束時（要么成功，要么失敗）觸發。 * .... ## 方法 * FileReader.readAsArrayBuffer(file) 開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 * ArrayBuffer 數據對象. * FileReader.readAsBinaryString(file) 開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取文件的原始二進制數據。 * FileReader.readAsDataURL(file) 開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。 * FileReader.readAsText(blob[, encoding]) 開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。 ## 預覽圖片 ~~~ <input type="file" onchange=onUpload3(this.files[0])> <div id="preview3"></div> function onUpload3(file) { var img = document.createElement('img') var reader = new FileReader() reader.addEventListener("load", function () { console.log(reader.result) img.src = reader.result document.getElementById('preview3').appendChild(img) }, false); if (file) { reader.readAsDataURL(file) } } ~~~ # 格式差異 其實主要是兩種格式base64和blob，它們之間的差異如下 * Blob URL的長度一般比較短 * Blob URL可以方便的使用XMLHttpRequest獲取源數據， base64不是所有瀏覽器都支持 * Blob URL 只能在當前應用內部使用 # 格式之間轉換 ## canvas轉為blob對象 ~~~ canvas.toBlob(function (blobObj) { console.log(blobObj) }) 復制代碼 ~~~ ## canvas轉為base64 ~~~ let imgSrc = canvas.toDataURL('image/png') 復制代碼 ~~~ ## base64轉為blob ~~~ function dataURLtoBlob(dataurl) { let arr = dataurl.split(","); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } ~~~ # 參考資料 [淺析 HTML5 中的 download 屬性](https://zhuanlan.zhihu.com/p/58888918) [少俠，留步，圖片預覽術](https://juejin.im/post/5b890c386fb9a019c771713a#heading-7) [FileReader - Web API 接口參考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)