700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > angular框架中 使用FileReader时 图片预览 会出现上传图片后 再点击上传图片才显示

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

时间:2024-01-10 17:31:52

相关推荐

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

我这里是通过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);

在测试一下 果然没问题了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。