代码:
<el-upload
ref="upload"
class="avatar-uploader"
:action="fileServerUrl" //地址
name="multipartFile"
accept="image/jpeg, image/gif, image/png, image/bmp"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="form.fileSaveUrl"
:src="form.fileSaveUrl"
class="avatar"
width="50px"
height="50px"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
methdis里的代码
handleAvatarSuccess(res, file) {
this.form.file = res;
this.form.fileSaveUrl = res;
this.form.fileSaveUrl = URL.createObjectURL(file.raw);
},
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";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error(
"上传头像格式不对!暂时只支持png,gif,jpg,bmp,jpeg"
);
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
},