一、引入el-upload组件
<el-upload
ref="smallTwoImg"
class="avatar-uploader"
:action="smallTwoActionUrl"
:show-file-list="false"
:on-success="handleSmallTwoImg"
:on-error="handleSmallError"
:before-upload="beforeUploadSmallTwoImg"
:headers="headerToken"
>
<img v-if="photoId" :src="photoId" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p>
小二寸蓝底证件照<span style="color: red"
>(格式:413*579)</span
>
</p>
二、相关方法
// 小二寸证件照上传之前的事件
beforeUploadSmallTwoImg(file) {
if (!file) {
this.$emit.error("上传错误");
return false;
}
const isJpgPng = file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgPng) {
this.$message.error("上传图片只能是 JPG/PNG 格式!");
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
return false;
}
// 新增图片尺寸验证部分
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = () => {
const { width, height } = img;
if (width !== 413 || height !== 579) {
this.$message.error("图片尺寸必须为413px*579px!");
reject(new Error("尺寸不符"));
} else {
resolve(true);
}
};
img.onerror = reject;
};
reader.readAsDataURL(file);
});
},
// 小二寸证件照上传成功时
handleSmallTwoImg(response, file, fileList) {
if (response.code == 0) {
// console.log(response, 12);
this.ruleForm.idPhoto = response.message;
this.photoId = response.message;
// console.log(file);
} else {
this.$message.error("上传错误");
}
},