angularJS <input type="file> 图片的base64编码

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

本篇完！