您的位置:首页 > Web前端 > AngularJS

angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示

2017-10-24 15:49 851 查看
我这里是通过FileReader获取图片的base64编码,赋值给img的src属性的,以此来进行预览

html代码:
<img src="{{vm.imageData}}" alt="" style="width: 90px;height: 75px;">
<input type="file" accept="image/gif,image/png,image/jpeg,image/jpg" ngf-select ng-model="vm.file" ng-change="vm.uploadFile()">
JS代码

var reader = new FileReader;
reader.onload = function (e) {

vm.imageData = e.target.result;

}
reader.readAsDataURL(vm.file);但是图片反复上传之后会出现图片上传后还是显示上一张,不显示最新的图片,再点击上传按钮的时候才会显示;
我想到的是数据绑定刷新的不及时,

就在js上加上一个脏检查,

var reader = new FileReader;
reader.onload = function (e) {
$scope.$apply(function () {
vm.imageData = e.target.result;
})
}
reader.readAsDataURL(vm.file);

在测试一下 果然没问题了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: