From 9cbafdfab85c9b1ecdef1886bbb4f606641818f7 Mon Sep 17 00:00:00 2001
From: Aqr-K <95741669+Aqr-K@users.noreply.github.com>
Date: Sun, 3 Nov 2024 18:28:07 +0800
Subject: [PATCH] feat(user): Add file type check and size determination
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加 文件类型检查
- 增加 文件大小限制，800KB
---
 src/components/dialog/UserAddEditDialog.vue | 18 ++++++++++++++++--
 src/views/user/UserProfileView.vue          | 18 +++++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/UserAddEditDialog.vue b/src/components/dialog/UserAddEditDialog.vue
index e732831c..cf42e778 100644
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -82,10 +82,24 @@ function changeAvatar(file: Event) {
   const fileReader = new FileReader()
   const { files } = file.target as HTMLInputElement
   if (files && files.length > 0) {
-    fileReader.readAsDataURL(files[0])
+    const selectedFile = files[0]
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
+    const maxSize = 800 * 1024
+    // 检查文件是否为图片
+    if (!allowedTypes.includes(selectedFile.type)) {
+      $toast.error('上传的文件不符合要求，请重新选择头像');
+      return;
+    }
+    // 检查文件大小
+    if (selectedFile.size > maxSize) {
+      $toast.error('文件大小不得大于800KB')
+      return
+    }
+    fileReader.readAsDataURL(selectedFile)
     fileReader.onload = () => {
       if (typeof fileReader.result === 'string') {
         currentAvatar.value = fileReader.result
+        $toast.success('新头像上传成功，待保存后生效!')
       }
     }
   }
@@ -289,7 +303,7 @@ onMounted(() => {
             </VBtn>
           </div>
 
-          <p class="text-body-1 mb-0">允许 JPG、PNG、GIF 格式， 最大尺寸 800K。</p>
+          <p class="text-body-1 mb-0">允许 JPG、PNG、GIF 格式， 最大尺寸 800KB。</p>
         </form>
       </VCardText>
       <VCardText>
diff --git a/src/views/user/UserProfileView.vue b/src/views/user/UserProfileView.vue
index 13b42ba8..f65bb5c0 100644
--- a/src/views/user/UserProfileView.vue
+++ b/src/views/user/UserProfileView.vue
@@ -73,9 +73,21 @@ const qrCode = ref('')
 function changeAvatar(file: Event) {
   const fileReader = new FileReader()
   const { files } = file.target as HTMLInputElement
-
   if (files && files.length > 0) {
-    fileReader.readAsDataURL(files[0])
+    const selectedFile = files[0]
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
+    const maxSize = 800 * 1024
+    // 检查文件是否为图片
+    if (!allowedTypes.includes(selectedFile.type)) {
+      $toast.error('上传的文件不符合要求，请重新选择头像');
+      return;
+    }
+    // 检查文件大小
+    if (selectedFile.size > maxSize) {
+      $toast.error('文件大小不得大于800KB')
+      return
+    }
+    fileReader.readAsDataURL(selectedFile)
     fileReader.onload = () => {
       if (typeof fileReader.result === 'string') {
         currentAvatar.value = fileReader.result
@@ -285,7 +297,7 @@ watch(
                 </VBtn>
               </div>
 
-              <p class="text-body-1 mb-0">允许 JPG、PNG、GIF 格式， 最大尺寸 800K。</p>
+              <p class="text-body-1 mb-0">允许 JPG、PNG、GIF 格式， 最大尺寸 800KB。</p>
             </form>
           </VCardText>