zoukankan      html  css  js  c++  java
  • vue 结合 FileReader() 实现上传图片预览功能

    项目中 身份证上传需求:

    <div class="ID_pic_wrap">
                <ul>
                    <li>
                        <img src="../../assets/images/id_face_pic@2x.png" >
                        <span class="cancel_btn" @click="delFun()"></span>
                        <input id="id_face_file" @change="uploadFile1" ref="files1" type="file">
                        <img id="showIdFaceSrc" :src="src1" alt="">
                    </li>
                    <li>
                        <img src="../../assets/images/id_behand_pic@2x.png" >
                        <span class="cancel_btn" @click="delFun()"></span>
                        <input id="id_behand_file" @change="uploadFile2"   ref="files2" type="file">
                        <img id="showIdbehandSrc" :src="src2" alt="">
                    </li>
                </ul>
            </div>
    

      

    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 

  • 相关阅读:
    Qt 6 正式发布
    GTK 4.0 正式发布
    编译 flink 1.12.0
    Flink 1.12.0 sql 任务指定 job name
    【翻译】Apache Flink 1.12.0 Release Announcement
    【源码】Flink 三层图结构 —— JobGraph 生成过程
    【源码】Flink 算子 chain 在一起的条件
    Web开发基础之CMDB系统开发之三
    Web开发基础之CMDB系统开发之二
    Ubuntu18.04升级至20.04
  • 原文地址:https://www.cnblogs.com/xiaomaotao/p/10371037.html
Copyright © 2011-2022 走看看