🐛 上传头像问题修复
This commit is contained in:
x ronger
parent
8a379f3852
commit
cb3acf99e2
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<client-only>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<h1>基本信息</h1>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form :model="user" :rules="rules" ref="user" label-width="100px">
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
@ -17,7 +20,7 @@
|
||||
<el-input type="textarea" v-model="user.signature"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="text-align: right;">
|
||||
<el-button type="primary" round @click="updateUserInfo" plain>保存</el-button>
|
||||
<el-button type="primary" round plain @click="updateUserInfo">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :model="userExtend" ref="userExtend" label-width="100px">
|
||||
@ -44,7 +47,7 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="text-align: right;">
|
||||
<el-button type="primary" round @click="updateUserExtend" plain>保存</el-button>
|
||||
<el-button type="primary" round plain @click="updateUserExtend">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<h1>我的头像</h1>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form :model="user" ref="user" label-width="100px">
|
||||
<el-form-item>
|
||||
@ -31,19 +34,16 @@
|
||||
<el-col :span="24" style="margin-top: 2rem;">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="tokenURL.URL"
|
||||
action=""
|
||||
:multiple="true"
|
||||
:with-credentials="true"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:data="uploadOption"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<div v-show="false">
|
||||
<Avataaars
|
||||
id="avatarSvg"
|
||||
style="width: 16rem; height: 16rem;"
|
||||
:avatarStyle='avatar.acatarStyle'
|
||||
:avatarStyle='avatar.avatarStyle'
|
||||
:topType='avatar.topType'
|
||||
:accessoriesType='avatar.accessoriesType'
|
||||
:hairColor='avatar.hairColor'
|
||||
@ -99,37 +99,14 @@ export default {
|
||||
return {
|
||||
user: {},
|
||||
loading: false,
|
||||
tokenURL: {
|
||||
URL: '',
|
||||
linkToImageURL: '',
|
||||
token: ''
|
||||
},
|
||||
avatarUrl: '',
|
||||
avatar: {},
|
||||
fileList: [],
|
||||
uploadOption: {
|
||||
type: 0
|
||||
},
|
||||
cropImg: '',
|
||||
data: null,
|
||||
autoCrop: true,
|
||||
imgSrc: logo
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _ts = this;
|
||||
this.$store.commit('setActiveMenu', 'avatar');
|
||||
this.$axios.$get('/api/upload/simple/token').then(function (res) {
|
||||
if (res) {
|
||||
_ts.$store.commit('setUploadHeaders', res.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: res.uploadToken || '',
|
||||
URL: res.uploadURL || '',
|
||||
})
|
||||
}
|
||||
});
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
genAvatar() {
|
||||
let _ts = this;
|
||||
@ -157,7 +134,6 @@ export default {
|
||||
user.avatarType = '0';
|
||||
_ts.$set(_ts, 'user', user);
|
||||
_ts.$set(_ts, 'avatarUrl', res.data.url);
|
||||
_ts.$refs.cropper.replace(res.data.url);
|
||||
} else {
|
||||
_ts.$message.error('上传失败!');
|
||||
}
|
||||
@ -166,14 +142,17 @@ export default {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!(isJPG || isPNG)) {
|
||||
this.$message.error('上传图标只能是 JPG 或者 PNG 格式!');
|
||||
|
||||
this.$message.error('上传头像只能是 JPG 或者 PNG 格式!');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图标大小不能超过 2MB!');
|
||||
this.$message.error('上传头像大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
return (isJPG || isPNG) && isLt2M;
|
||||
this.fileToBase64(file);
|
||||
return false;
|
||||
},
|
||||
getData() {
|
||||
let _ts = this;
|
||||
@ -185,6 +164,7 @@ export default {
|
||||
_ts.$set(_ts, 'user', res.user);
|
||||
_ts.$set(_ts, 'avatarUrl', res.user.avatarUrl);
|
||||
_ts.$refs.cropper.replace(res.user.avatarUrl);
|
||||
// _ts.webImageToBase64(res.user.avatarUrl);
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -199,7 +179,7 @@ export default {
|
||||
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
} catch (e) {
|
||||
_ts.$message.error('图片获取失败 !');
|
||||
return ;
|
||||
return;
|
||||
}
|
||||
let user = _ts.user;
|
||||
user.avatarType = 1;
|
||||
@ -226,7 +206,56 @@ export default {
|
||||
_ts.$message.error('数据异常 !');
|
||||
}
|
||||
});
|
||||
},
|
||||
fileToBase64(file) {
|
||||
let _ts = this;
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function () {
|
||||
_ts.$set(_ts, 'avatarUrl', this.result);
|
||||
_ts.$refs.cropper.replace(this.result);
|
||||
}
|
||||
},
|
||||
compress(img, width, height, ratio) {
|
||||
// img可以是dataURL或者图片url
|
||||
/* 如果宽度大于 750 图片太大 等比压缩 */
|
||||
if (width > 750) {
|
||||
let ratio = width / height;
|
||||
width = 750;
|
||||
height = 750 / ratio;
|
||||
}
|
||||
let canvas, ctx, img64;
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
/* canvas.toDataURL(mimeType（图片的类型）, qualityArgument（图片质量）) */
|
||||
img64 = canvas.toDataURL("image/jpeg", ratio);
|
||||
|
||||
return img64; // 压缩后的base64串
|
||||
},
|
||||
webImageToBase64(url) {
|
||||
let _ts = this;
|
||||
let c = document.createElement("canvas");
|
||||
let cxt = c.getContext("2d");
|
||||
let img = new Image();
|
||||
img.setAttribute("crossOrigin", '*');
|
||||
img.onload = function () {
|
||||
c.width = this.width;
|
||||
c.height = this.height;
|
||||
cxt.drawImage(img, 0, 0, this.width, this.height) // 在canvas上绘制图片
|
||||
let dataURL = _ts.compress(img, this.width, this.height, 0.8);
|
||||
console.log(dataURL)
|
||||
}
|
||||
img.src = url;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setActiveMenu', 'avatar');
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user