HTML5 file對象和blob對象的互相轉換

最近在做一個裁剪圖片的需求，基於vue和elementui，裁剪完圖片遇到一個坑，elementui的upload組件接受一個promise，要求promise resolve一個File對象才可以使用新文件上傳，而canvas是轉成了blob對象，我google查了好久，沒有發現有blob對象轉File的文章，所以今天來寫一個吧！

使用FileReader 對象轉換：File => DataURL

該對象用於讀取文件（讀取單個對象文件，所以，不能直接讀取 Filelist 對象文件集合），即把文件內容讀入內存。它接收 File 對象或 Blob 對象，作為參數。

生成該對象的構造函數方法如下：

  var reader = new FileReader(); // 參數為 Blob 對象或 File 對象

對於不同類型的文件，FileReader 使用不同的方法讀取。方法如下：

• readAsBinaryString(Blob|File)：返回二進制字符串，該字符串每個字節包含一個 0 到 255 之間的整數。
• readAsText(Blob|File, opt_encoding) ：返回文本字符串。默認情況下，文本編碼格式是'UTF-8'，可以通過可選的格式參數，指定其他編碼格式的文本。
• readAsDataURL(Blob|File)：返回一個基於 Base64 編碼的 data-uri 對象。
• readAsArrayBuffer(Blob|File) ：返回一個 ArrayBuffer（數組緩存）對象。
• abort()：該方法用於中止文件上傳。

下面是獲取上傳對象的文本內容的方法：

    var reader = new FileReader(); reader.onload = function(e){ // target.result 該屬性表示目標對象的DataURL console.log(e.target.result); } // 傳入一個參數對象即可得到基於該參數對象的文本內容 reader.rederAsDataURL(file);

利用canvas剪切圖片

CanvasRenderingContext2D.drawImage() 是 Canvas 2D API 中的方法，它提供了多種方式來在Canvas上繪制圖像，我們使用drawImage方法節剪切圖片。

先從canvas獲取剪切過的圖片DataURL

    // 獲取canvas let ctx = this.$refs.canvas.getContext('2d') // 獲取圖片dom元素 let image = this.$refs.image // 裁剪圖片200 * 200圖片 ctx.drawImage(image, x, y, w, h, 0, 0, 200, 200) // canvas生成剪切過的圖片DataURL this.cutAvater = this.$refs.canvas.toDataURL()

具體的裁剪方法我下篇文章會寫

將dataurl轉換為Blob對象

    let arr = this.cutAvater.split(',') let data = window.atob(arr[1]) let mime = arr[0].match(/:(.*?);/)[1] let ia = new Uint8Array(data.length) for (var i = 0; i < data.length; i++) { ia[i] = data.charCodeAt(i) } this.blob = new Blob([ia], {type: mime})

利用File Api講blob轉成File對象

其實我google找了一圈只有 File => Blob，沒人寫怎么用Blob => File 最終我在File中找到了File()構造函數

    let files = new window.File([this.blob], file.name, {type: file.type})

File()構造函數的前兩個參數為必傳