vue中按钮点击上传图片并预览

- 日理万妓 2022-11-14 13:18 384阅读 0赞

html部分：

<input type="file" ref="filElem" class="upImage" accept="image/*" @change="onFileChange" />
    
    <div v-if="!pic" @click="uppic">上传照片</div>
    
     <div v-else class="haspic"  @click="uppic">
    
          <img :src="pic"/>
    
     </div>

js部分：

data: {
    		pic:''
    					
    	}, 
    methods: {        
             uppic(){
    
                    this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
    
              },
    
              onFileChange(e) {
    
                let that = this;
    
                let file = e.target.files[0];
    
                //对文件检查
    
                let allType = "image/png,image/gif,image/jpeg,image/jpg,image/svg";
    
                if (allType.indexOf(file.type) == "-1") {
    
                  showTips("请选择图片文件");
    
                  return false;
    
                } 
    
                console.info("file",file)         
    
                let param = new FormData(); //创建form对象
    
                console.info("param",param)
    
                param.file = file;
    
                console.info("param",param)
    
                // 创建文件读取对象
    
                var reader = new FileReader();
    
                reader.readAsDataURL(file);
    
                // 读取成功调用方法
    
                reader.onload = e => {
    
                  console.log('读取成功');
    
                  // e.target.result 获取 读取成功后的  文件DataURL
    
                  that.pic = e.target.result;
    
                }
    
              },
    },