feat(KYC页): 更改图片上传方式

src/views/Wallet/CashOut/KYC.vue

@@ -60,11 +60,14 @@
             src="/src/assets/icon/addImg.png"
             alt=""
             style="display: block; width: 15vw; aspect-ratio: 1/1; object-fit: cover"
+            @click="triggerFileInput"
           />
           <input
+            ref="fileInputRef"
             type="file"
+            accept="image/*"
             @change="handleFileChange"
-            style="position: absolute; inset: 0; opacity: 0"
+            style="display: none"
           />
         </div>
 
@@ -176,6 +179,8 @@ import { getWithdrawInfoList, addWithdrawInfo, updateWithdrawInfo } from '@/api/
 const { t, locale } = useI18n()
 const router = useRouter()
 
+const fileInputRef = ref(null)
+
 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)
 
@@ -201,37 +206,67 @@ const checkStatus = computed(() => {
   return applyInfo.value.contactNumber != '' && previewUrls.value.length > 0
 })
 
+// 点击文件选择
+const triggerFileInput = () => {
+  console.log('触发文件选择')
+  if (fileInputRef.value) {
+    fileInputRef.value.click()
+  }
+}
+
 // 处理文件选择(每次选一张)
 const handleFileChange = (e) => {
-  // 最多3张图片
+  console.log('=== 文件选择事件开始 ===')
-  if (previewUrls.value.length < 3) {
+
-    const fileList = e.target.files // 获取第一个文件对象
+  try {
+    // 详细记录文件选择状态
+    if (!e.target.files || e.target.files.length === 0) {
+      console.warn('No files selected or unsupported environment')
+      // 可以添加用户提示
+      console.log(
+        '触发条件: !e.target=',
+        !e.target,
+        ', !e.target.files=',
+        !e.target.files,
+        ', e.target.files.length === 0=',
+        e.target.files?.length === 0
+      )
 
-    // 检查是否有文件
-    if (!fileList || fileList.length === 0) {
-      console.error('未选择文件')
       return
     }
 
-    // 提取第一个文件并验证
+    // 最多3张图片
-    const file = fileList[0]
+    if (previewUrls.value.length < 3) {
-    if (!file.type || !file.type.startsWith('image/')) {
+      const fileList = e.target.files // 获取第一个文件对象
-      console.error(`不支持的文件类型: ${file.type || '未知'}`)
+
-      showError(t('unsupported_file_type'))
+      // 检查是否有文件
-      return
+      if (!fileList || fileList.length === 0) {
+        console.error('未选择文件')
+        return
+      }
+
+      // 提取第一个文件并验证
+      const file = fileList[0]
+      if (!file.type || !file.type.startsWith('image/')) {
+        console.error(`不支持的文件类型: ${file.type || '未知'}`)
+        showError(t('unsupported_file_type'))
+        return
+      }
+
+      // 3. 通过验证后的操作（示例）
+      console.log('文件名:', file.name) // defaultAvatar.png
+      console.log('文件类型:', file.type) // image/png
+      console.log('文件大小:', (file.size / 1024).toFixed(2), 'KB')
+
+      // 生成预览图
+      previewUrls.value.push(URL.createObjectURL(file))
+      //临时文件列表，用于上传
+      tempFiles.value.push(file)
+    } else {
+      showWarning(t('max_images_warning'))
     }
-
+  } catch (error) {
-    // 3. 通过验证后的操作（示例）
+    console.error('File selection error:', error)
-    console.log('文件名:', file.name) // defaultAvatar.png
-    console.log('文件类型:', file.type) // image/png
-    console.log('文件大小:', (file.size / 1024).toFixed(2), 'KB')
-
-    // 生成预览图
-    previewUrls.value.push(URL.createObjectURL(file))
-    //临时文件列表，用于上传
-    tempFiles.value.push(file)
-  } else {
-    showWarning(t('max_images_warning'))
   }
 }