|  |  | @@ -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 { | 
		
	
	
		
			
				|  |  | 
 |