vue 结合 FileReader() 实现上传图片预览功能

项目中 身份证上传需求：

　　

uploadFile1(e){
            let _this = this;
            // console.log(e.target.files[0])
            if (!e || !window.FileReader) return  // 看支持不支持FileReader
            let reader = new FileReader()
            reader.readAsDataURL(e.target.files[0]) // 这里是最关键的一步，转换就在这里 （参数必须是blob对象）
            reader.onloadend = function () {
                _this.src1 = this.result
            }
        },
        uploadFile2(e){

            console.log(222)
            let _this = this;
            if (!e || !window.FileReader) return  // 看支持不支持FileReader 
            // console.log(e.target.files[0]);
            let reader = new FileReader()
            reader.readAsDataURL(e.target.files[0]) // 这里是最关键的一步，转换就在这里（参数必须是blob对象）
 　　　　　　reader.onloadend = function () { 
　　　　　　　　_this.src2 = this.result 
　　　　　　　} 
　　　　　　}, 
　　　　　　delFun(){ 
　　　　　　　　if(this.src1){ 
　　　　　　　　　　this.src1 = ""; 
　　　　　　　　　　this.$refs.files1.value=""; //这里清空input的value 不然不可以选择相同的文件 
　　　　　　　　}else if(this.src2){ 
　　　　　　　　this.src2 = ""; 
　　　　　　　　this.$refs.files2.value=""; //这里清空input的value 不然不可以选择相同的文件
　　　　　　}
　　 },

 

　　note:

　　　　 FileReader() 兼容性

 

更多信息 移步：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 

 

转载于:https://www.cnblogs.com/xiaomaotao/p/10371037.html