一、组件布局部分
<el-upload
class="avatar-uploader"
// action提交的地址为后台转为存放图片文件的一个接口地址
action="/api/employee/addimages"
:headers = "headers"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
v-model="formEdit.e_icon">
<img v-if="imageUrl" :src="imageUrl" class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
二、js的methods部分（需要注意的是，file名是固定的，为后台的文件或图片名称，不能更改）
// 图片上传
handleAvatarSuccess(res,file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.formEdit.e_icon = res.data[0].e_icon
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
