template部分代码，引入upload组件，这里采用自动上传文件
<div class="filesC">
<el-upload
ref="files"
name="imgFile"
class="avatar-uploader"
:with-credentials="true"
:action="action"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
图片尺寸：141*54
</div>
script部分代码，图片上传之前触发beforeAvatarUpload ，在这里return false 会中断上传操作
beforeAvatarUpload (file) {
let _this = this
if (file.type.indexOf('image')<0) {
this.$alert({message: '图片格式不正确', btn: false})
return false
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isSize = new Promise(function(resolve, reject) {
let width = 141;
let height = 54;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
_this.$alert({message: '上传的icon必须是等于141*54!', btn: false})
return Promise.reject();
});
return isSize
},
handleAvatarSuccess (res, file) {
if (res.state==200) {
this.imageUrl = URL.createObjectURL(file.raw);//从文件中读取的本地文件路径，用于显示在img标签里
this.fileUrl = res.data//上传成功后，后台给返回的图片线上路径
}else{
this.$alert({message: '上传失败', btn: false})
}
},
handleAvatarError (res, file) {
this.$alert({message: '选择图片失败', btn: false})
/*this.imageUrl = URL.createObjectURL(file.raw);*/
},
css代码，修改原组件的样式
.filesC .avatar-uploader .el-upload {
border: 1px solid #aaa;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.filesC .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.filesC .avatar-uploader-icon {
font-size: 20px;
color: #8c939d;
width: 141px;
height: 54px;
line-height: 54px;
text-align: center;
background: white;
}
.filesC .avatar {
width: 141px;
height: 54px;
display: block;
}
