1、template代码如下
代码解析：
action为空就可以；
show-file-list 是否显示已上传文件列表
before-upload：绑定的是上传图片前要执行的方法用来限制图片的大小、格式
http-request：绑定的是上传图片的方法
img 标签里放的是上传成功后显示出来的图片
i 标签里 放的是默认未上传图片时的图标
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="selectPicUpload"
:before-upload="beforeAvatarUpload"
>
<img v-if="iconVal" width="85px" height="85px" :src="iconVal" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
2、js代码 （两个方法）
//上传图标事件
selectPicUpload(obj) {
let fd = new FormData(); //参数的格式是formData格式的
fd.append('uploadFile', obj.file); //参数
this.$api.StoreDiodeUpload(fd).then(res => {
if (res) {
this.iconVal =res;
this.message('上传成功', 1)
} else {
this.message('上传失败', -1)
}
}).catch(error => {
})
},
//对上传图片的大小、格式进行限制
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isJPG2 = file.type === 'image/jpg';
const isPNG = file.type === 'image/png';
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isJPG && !isJPG2 && !isPNG) {
this.$message.warning('只支持jpg或png格式图片');
}
if (!isLt5M) {
this.$message.warning('请上传5MB以内的图片!');
}
return (isJPG || isJPG2 || isPNG) && isLt5M;
}
