<el-form-item label="头像上传">
<el-upload
class="avatar-uploader"
:action="uploadImgUrl"
:headers="{
Authorization:
'Bearer ' + $store.state.tokenInfo?.accessToken,
}"
:show-file-list="false"
:on-success="handleAvatarSuccess"
accept=".pdf, .jpg, .jpeg, .gif,.png"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
action:为上传图片的接口
beforeAvatarUpload:为上传前的操作
export function beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isGIF = file.type === 'image/gif';
const isPNG = file.type === 'image/png';
const isBMP = file.type === 'image/bmp';
if (!isJPG && !isGIF && !isPNG && !isBMP) {
ElMessage({
message: '图片格式不正确,请选择 image/jpeg/jpg/png/gif/bmp 类型图片',
duration: 8000,
type: 'warning',
showClose: true
});
}
console.log(isPNG);
return (isJPG || isBMP || isGIF || isPNG);
}