码迷,mamicode.com
首页 > 其他好文 > 详细

vue+element input file 选择图片并预览

时间:2020-10-27 10:58:03      阅读:31      评论:0      收藏:0      [点我收藏+]

标签:line   ada   splay   read   over   spl   lock   rgb   data   

dom部分:

 
<el-form-item label="上传封面">
      <input type="file" id="cover" accept="image/png, image/jpeg, image/jpg" @change="preview(this)">
      <span style="display:inline-block;width:100px;height:100px;background:#e0e0e0;">
        <img :src="coversrc" alt="封面" id="coverImg" style="width:100%;height:100%">
      </span>
      <el-button type="success" size="small">上传</el-button>
</el-form-item>

js部分

preview(){
        var fr=new FileReader();
        var cover=document.getElementById(‘cover‘).files[0];
        fr.readAsDataURL(cover);
        fr.onload=function(e){
          document.getElementById(‘coverImg‘).src = this.result;
        }
      }

效果图:

技术图片

 

 

vue+element input file 选择图片并预览

标签:line   ada   splay   read   over   spl   lock   rgb   data   

原文地址:https://www.cnblogs.com/pumkz/p/13878201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!