java怎么筛选图片文件_vue使用readAsDataURL实现选择图片文件后预览

vue实现选择图片文件后预览

利用h5的api可以实现选择文件并实现预览

readasdataurl

方法会读取指定的 blob 或 file 对象。读取操作完成的时候，readystate 会变成已完成done，并触发 loadend 事件，同时 result 属性将包含一个data:url格式的字符串(base64编码)以表示所读取文件的内容

方式引入vue文件

文件选择框,并添加change事件，和dom操作ref

添加一个用于显示预览的img标签

实例化vue并完成操作

var vm = new vue({

el: '#app',

methods: {

//change事件

uploadimg(el) {

//根据ref得到图片文件

var file = this.$refs.img;

//使用h5的读取文件api

var reader = new filereader();

reader.readasdataurl(file.files[0]);

//读取完成后触发

reader.onload = function () {

//改变img的路径

document.queryselector("img").src = this.result;

};

}

},

})

效果

完整代码

更多内容关注

希望与广大网友互动？？

点此进行留言吧！