<el-upload
class="avatar-uploader"
action="上传后端地址"
:show-file-list="false"
:auto-upload="true"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<i
v-if="imageUrl"
class="el-icon-delete deleteImg"
@click.stop="handleRemove"
></i>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
上传完成后的处理后端返回,beforeAvatarUpload是上传前验证图片大小
handleAvatarSuccess(res, file) {
console.log(res)
if (res.code === 200){
this.imageUrl = res.url;
}else{
this.$message.error('上传图片失败')
}
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isLt2M;
},
handleRemove(file, fileList) {
this.imageUrl = "";
},