标签: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