|
|
@@ -175,10 +175,18 @@ |
|
|
|
<el-row> |
|
|
|
<el-col :span="4"> {{ $t("public.avatar") }}: </el-col> |
|
|
|
<el-col :span="20"> |
|
|
|
<div class="dialogAvatar"> |
|
|
|
<input accept="image/*" type="file" @change="chooseImg" /> |
|
|
|
<div class="add">+</div> |
|
|
|
<img v-if="dialogAvatarUrl" :src="dialogAvatarUrl" alt="" /> |
|
|
|
<div class="flex"> |
|
|
|
<div class="dialogAvatar"> |
|
|
|
<input accept="image/*" type="file" @change="chooseImg" /> |
|
|
|
<div class="add">+</div> |
|
|
|
<img v-if="dialogAvatarUrl" :src="dialogAvatarUrl" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="compressLoadBox" v-if="compressImgLoadIng"> |
|
|
|
<el-icon class="is-loading"> |
|
|
|
<i-ep-Loading /> |
|
|
|
</el-icon> |
|
|
|
<div class="tips">{{ $t("account.compressLoad") }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
@@ -239,23 +247,36 @@ function resetPassWord() { |
|
|
|
router.push({ name: "login", query: { type: 4 } }); |
|
|
|
} |
|
|
|
// 选择图片 |
|
|
|
|
|
|
|
const compressImgLoadIng = ref(false); |
|
|
|
async function chooseImg(e) { |
|
|
|
if (e.target.files[0]) { |
|
|
|
dialogAvatarUrl.value = null; |
|
|
|
dialogAvatarData.value = null; |
|
|
|
// 压缩配置 |
|
|
|
const options = { |
|
|
|
maxSizeMB: 2, // 最大压缩大小为 2MB |
|
|
|
useWebWorker: false, // 使用 Web Worker 进行压缩,提高性能 |
|
|
|
}; |
|
|
|
const compressedFile = await imageCompression(e.target.files[0], options); |
|
|
|
dialogAvatarUrl.value = URL.createObjectURL(compressedFile); |
|
|
|
dialogAvatarData.value = compressedFile; |
|
|
|
// 不压缩图片 |
|
|
|
// dialogAvatarUrl.value = e.target.files[0]; |
|
|
|
// dialogAvatarData.value = e.target.files[0]; |
|
|
|
} else { |
|
|
|
return; |
|
|
|
try { |
|
|
|
if (e.target.files[0]) { |
|
|
|
dialogAvatarUrl.value = null; |
|
|
|
dialogAvatarData.value = null; |
|
|
|
compressImgLoadIng.value = true; |
|
|
|
// 压缩配置 |
|
|
|
const options = { |
|
|
|
maxSizeMB: 2, // 最大压缩大小为 2MB |
|
|
|
useWebWorker: false, // 使用 Web Worker 进行压缩,提高性能 |
|
|
|
}; |
|
|
|
const compressedFile = await imageCompression(e.target.files[0], options); |
|
|
|
dialogAvatarUrl.value = URL.createObjectURL(compressedFile); |
|
|
|
dialogAvatarData.value = compressedFile; |
|
|
|
compressImgLoadIng.value = false; |
|
|
|
// 不压缩图片 |
|
|
|
// dialogAvatarUrl.value = URL.createObjectURL(e.target.files[0]); |
|
|
|
// dialogAvatarData.value = e.target.files[0]; |
|
|
|
} else { |
|
|
|
return; |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `上传失败,请稍后重试` |
|
|
|
: `Upload failure. Please try again later` |
|
|
|
); |
|
|
|
compressImgLoadIng.value = false; |
|
|
|
} |
|
|
|
} |
|
|
|
const submitUserInfoLoading = ref(false); |
|
|
@@ -271,6 +292,7 @@ async function submitUserInfo() { |
|
|
|
name: userNameinput.value, |
|
|
|
avatarUrl: res1.data.url, |
|
|
|
}; |
|
|
|
|
|
|
|
try { |
|
|
|
const res2 = await updUserInfoApi(data); |
|
|
|
ElMessage.success( |
|
|
@@ -888,6 +910,21 @@ function routerTo(url) { |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
.compressLoadBox { |
|
|
|
// align-items: center; |
|
|
|
padding-top: 40px; |
|
|
|
text-align: center; |
|
|
|
flex: 1; |
|
|
|
.el-icon { |
|
|
|
font-size: 20px; |
|
|
|
color: #909393; |
|
|
|
} |
|
|
|
.tips { |
|
|
|
// display: inline-block; |
|
|
|
flex: 1; |
|
|
|
line-height: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 公共类名 |
|
|
|
.bigWord { |
|
|
|