angularJS 本文轉載自 查看原文 2017-04-18 15:38 2570 base64/ angularJS

talk is cheap show me the code

<input type="file" id="file" name="file"
    ng-model="Ctrl.picture"
    accept="image/jpeg,image/png,image/jpg"
    onchange="angular.element(this).scope().deCtrl.handleConFiles(this.files)">

坑一：angularJS的input-file會讓ng-change失效

解決辦法是用onchange覆蓋ng-change，格式為：

onchange="angular.element(this).scope().yourfunction()

如何才能獲取圖片的base64編碼？

HTML代碼里，onchange事件觸發的handleConFiles函數，如下：

function handleConFiles(files){
    var file = files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(theFile) {
        console.log(theFile.target.result)  //base64編碼
    };
}

注意第二行，file=files[0]，如果不加這一行，會報錯

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

具體原因暫時還不清楚，猜測是參數類型的問題，歡迎dalao們留言指正。

FileReader()讀取文件，readAsDataURL讀取指定file or Blob對象中的內容。關於更多FileReader的知識，猛戳這里

theFile.target.result就是需要的圖片base64編碼，也不完全是。

這里獲取的base64字符串具有一定的格式，console.log(theFile.target.result)會發現，打印出來的數據為：

data:image/png;base64,base64string

前綴是對后面字符串的修飾和說明，指明這是一張圖片的base64編碼字符串，因此如果需要做圖片預覽，直接賦值給src就可以了

<img ng-src="{{Ctrl.picture}}">

到此獲取到了圖片的base64編碼，結束？

NO！

這里還有一個坑。。。。

雖然獲取到了圖片的base64編碼，同時也綁定到了picture上，但是提交表單的時候，picture的值為C://fakepath/圖片名。

猜想是由於ng-model綁定着picture的值，選取文件默認賦值為C://fakepath/..因而后續的表單操作使得已經獲取到的base64編碼字符串被覆蓋。picture的值還原為C://fakepath/..

解決辦法：獲取到base64編碼之后，用一個變量存儲該字符串，在提交表單時再賦值給picture

 

本篇完！