效果展示:
新增时使用el-ui默认样式展示图片:
编辑时使用自己img样式展示图片:
el-ui选取图片代码:
<el-upload
class="upload-demo"
action=""
:on-change="handleChange"
:limit="1"
:show-file-list="showImg"
:auto-upload="false"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">选取图片</el-button>
</el-upload>
<ul v-if="!showImg" class="el-upload-list el-upload-list--picture">
<li tabindex="0" class="el-upload-list__item is-ready">
<img :src="imgUrl" alt class="el-upload-list__item-thumbnail">
</li>
</ul>
所需参数:
fileList:[],
showImg:true,
imgUrl:''
所需方法:
handleChange(file, fileList) {
//是否使用el-ui默认图片样式
this.showImg = true;
var This = this;
if(!this.volidImg(file)){
return;
}
//获取base64
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function(e){
This.imgUrl = this.result; //图片base64编码
}
},
//校验是否为图片
volidImg(file){
const isJPG = file.raw.type === 'image/jpeg';
const isPng = file.raw.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPng) {
this.$message.error('上传印章图片格式不符合!');
this.fileList = [];
}
if (!isLt2M) {
this.$message.error('上传印章图片大小不能超过 2MB!');
this.fileList = [];
}
return (isJPG || isPng) && isLt2M;
}