一觅赊、組件布局部分
<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;
}
