<input type="file" id="file" name="file"
ng-model="Ctrl.picture"
accept="image/jpeg,image/png,image/jpg"
onchange="angular.element(this).scope().myFunction(this.files)">
坑一:angularJS的input-file会让ng-change失效
解决办法是用onchange覆盖ng-change,格式为:
onchange="angular.element(this).scope().yourfunction()
如何才能获取图片的base64编码?
HTML代码里,onchange事件触发的handleConFiles函数,如下:
function myFunction(files){
var file = files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(theFile) {
imagedata = theFile.target.result //base64编码,用一个变量存储
};
}
FileReader()读取文件,readAsDataURL读取指定file or Blob对象中的内容。theFile.target.result就是需要的图片base64编码 , 这里获取的base64字符串具有一定的格式,console.log(theFile.target.result)会发现,打印出来的数据为:
data:image/png;base64,base64string
通过截取字符串去掉data:image/png;base64,
var imageDataBase64 = imagedata .substr(imagedata .indexOf('base64,') + 'base64,'.length);
至此就得到了图片的base64编码。