<el-upload
class="avatar-uploader"
action="123"
:http-request="upLoad"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="headUrl" :src="headUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
upLoad(file) {
const formData = new FormData();
formData.append('file', file.file);
console.log(file);
this.$http.uploadHttp('/udb/api/v1/oss/fileUpload', formData).then((res) => {
console.log(res);
console.log('上传成功');
if (res.data.code === 0) {
this.successUrl = res.data.response; // 请求之后将返回的URL给修改的接口在进行一次修改请求
this.headUrl = res.data.response; // 请求成功之后赋给头像的URL
this.$message('头像上传成功');
this.$store.dispatch('person/setAvatar', this.successUrl);
const obj = {
headUrl: this.successUrl
};
this.edit(obj);
// this.getAccount();
} else {
this.$message('头像上传失败');
}
});
},
// handleSuccess(file) {
// console.log(file);
// this.$store.dispatch('person/setAvatar', '头像地址');
// },
handleAvatarSuccess(res, file) {
this.headUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt3M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt3M) {
this.$message.error('上传头像图片大小不能超过 3MB!');
}
return isJPG && isLt3M;
},