摘要：少年，我看你骨骼精奇，是萬中無一的武學奇才，我這有本圖片流秘籍，見與你有緣，就送于你了。文件大小，單位為字節，該屬性只讀。用來讀取或文件數據，基于文件大小不同，讀取的過程為異步。

少年，我看你骨骼精奇，是萬中無一的武學奇才，我這有本《圖片流》秘籍，見與你有緣，就送于你了。

本文所說的圖片流就是讀取本地圖片，并在頁面使用文件流的方式顯示出來。

首先，我們簡單說下文件上傳的幾種方式, 然后依次來實現它們

通過用戶點擊，創建,并監聽change事件獲取file對象，大體如下

click = () => {
    let input = document.createElement("input")
    input.setAttribute("type", "file")
    input.setAttribute("accept", "image/*")
    
    input.onchange = event => {
        let file = event.target.files[0]
    }
    
    input.click()
    
} 

使用HTML5的拖放API，監聽元素的drop事件，同樣是獲取file對象

會創建一個DataTransfer對象,下面我們還會遇到它，稍后再說

dragover = event => {
   event.preventDefault()
}

drop = event => {
    event.preventDefault()
    let files =  event.dataTransfer.files
}

給元素綁定粘貼事件，得益于contenteditable我們可以給所有元素添加，濤聲依舊，獲取event中包含的file

paste = (e) => {
    e.preventDefault()
    let file = e.clipboardData.files[0]
}

paste事件提供了一個clipboardData屬性，是一個DataTransfer類型的對象，前面我們說到，拖放會產生一個DataTransfer對象，沒錯，粘貼也是它。

來來來，掀起了她的蓋頭來。

上面可以看到，clipboardData有如下屬性

dropEffect 默認是node

effectAllowed 默認是uninitialized

files 本地文件列表

items 剪切板中的各項數據

types 剪切板中的各項數據類型

我們只需要使用files即可，圖片文件在它里面

通常情況下， File 對象是來自用戶在一個元素上選擇文件后返回的 FileList 對象,也可以是來自由拖放操作生成的DataTransfer對象，繼承于Blob

廬山真面目，諾，就是這個樣子。

可以看到有如下屬性：

name：文件名，該屬性只讀。

size：文件大小，單位為字節，該屬性只讀。

type：文件的 MIME 類型，如果分辨不出類型，則為空字符串，該屬性只讀。

lastModified：文件的上次修改時間，格式為時間戳。

lastModifiedDate：文件的上次修改時間，格式為 Date 對象實例。

我們不去深究file對象，只需要知道通過它可以訪問本地的文件。

一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。Blob表示的數據不一定是一個JavaScript原生格式。 File 接口基于Blob，繼承 blob功能并將其擴展為支持用戶系統上的文件。

var aBlob = new Blob( array, options );

array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其他類似對象的混合體，它將會被放進 Blob.

options 是一個可選的Blob熟悉字典，它可能會指定如下兩種屬性

type，默認值為 “”，它代表了將會被放入到blob中的數組內容的MIME類型。

endings，默認值為”transparent”，它代表包含行結束符n的字符串如何被輸出。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
console.log(myBlob);

通過動態創建blob，我們可以實現純前端下載

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${Date.now()}.doc`;
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);

Blob URL是blob協議的URL，格式如下

blob:http://localhost:1234/946644c4-ca98-405e-918c-759e790d0330

Blob URL可以通過URL.createObjectURL(blob)創建, 在每次調用createObjectURL()方法時，都會創建一個新的 URL 對象，即使你已經用相同的對象作為參數創建過。

在不需要這些URL對象的時候， 通過URL.revokeObjectURL(objectURL) 釋放URL對象

使用Blob URL進行顯示本地圖片，我們只需要把創建的URL賦值給img的src屬性就可以了。

FileReader用來讀取file或blob文件數據，基于文件大小不同，讀取的過程為異步。

let render = new FileReader()
render.onload = () => {
    let src = render.result
}
render.readAsDataURL(file)

FileReader讀取文件方法

readAsBinaryString file 將文件讀取為二進制編碼

readAsBinaryArray file 將文件讀取為二進制數組

readAsText file[, encoding] 按照格式將文件讀取為文本，encode默認為UTF-8

readAsDataURL file 將文件讀取為DataUrl

使用FileReader進行文件的讀取，就可以將圖片讀取成base64格式的了。

直接在FileReader實例的onload函數里面將result賦值給src即可

其實主要是兩種格式base64和blob，它們之間的差異如下

Blob URL的長度一般比較短

Blob URL可以方便的使用XMLHttpRequest獲取源數據， base64不是所有瀏覽器都支持

Blob URL 只能在當前應用內部使用

canvas.toBlob(function (blobObj) {
    console.log(blobObj)
})

let imgSrc = canvas.toDataURL("image/png")

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);
  }

  return new Blob([u8arr], { type: mime });
}

前端利用Blob對象創建指定文件并下載

DataURL 與 File,Blob,canvas 對象之間的互相轉換

文本完整代碼，請戳github

各位，周末快樂。