im-ui-mobile 0.1.13 → 0.1.15

package/components/im-upload/im-upload.vue

@@ -1,33 +1,22 @@
 <template>
   <view class="im-upload">
     <!-- 上传区域 -->
-    <view 
-      class="im-upload__area"
-      :class="[
-        `im-upload__area--${type}`,
-        { 'im-upload__area--disabled': disabled },
-        { 'im-upload__area--readonly': readonly },
-        { 'im-upload__area--drag-over': dragOver }
-      ]"
-      @tap="handleUploadTap"
-      @touchmove="handleDragOver"
-      @touchend="handleDragLeave"
-    >
+    <view class="im-upload__area" :class="[
+      `im-upload__area--${type}`,
+      { 'im-upload__area--disabled': disabled },
+      { 'im-upload__area--readonly': readonly },
+      { 'im-upload__area--drag-over': dragOver }
+    ]" @tap="handleUploadTap" @touchmove="handleDragOver" @touchend="handleDragLeave">
       <!-- 按钮类型 -->
       <template v-if="type === 'button'">
-        <im-button 
-          :type="buttonType"
-          :size="buttonSize"
-          :disabled="disabled"
-          :loading="uploading"
-        >
+        <im-button :type="buttonType" :size="buttonSize" :disabled="disabled" :loading="uploading">
           <view class="im-upload__button-content">
             <text v-if="!uploading" class="im-upload__icon">+</text>
             <text class="im-upload__text">{{ uploading ? '上传中...' : buttonText }}</text>
           </view>
         </im-button>
       </template>
-      
+
       <!-- 卡片类型 -->
       <template v-else-if="type === 'card'">
         <view class="im-upload__card">
@@ -36,15 +25,11 @@
           <text v-if="hint" class="im-upload__card-hint">{{ hint }}</text>
         </view>
       </template>
-      
+
       <!-- 头像类型 -->
       <template v-else-if="type === 'avatar'">
         <view class="im-upload__avatar">
-          <im-avatar 
-            :src="fileList[0]?.url"
-            :size="avatarSize"
-            :radius="avatarRadius"
-          >
+          <im-avatar :src="fileList[0]?.url" :size="avatarSize" :radius="avatarRadius">
             <template v-if="!fileList[0]?.url">
               <text class="im-upload__avatar-icon">+</text>
             </template>
@@ -52,7 +37,7 @@
           <text class="im-upload__avatar-text">{{ avatarText }}</text>
         </view>
       </template>
-      
+
       <!-- 拖拽区域类型 -->
       <template v-else-if="type === 'drag'">
         <view class="im-upload__drag">
@@ -64,74 +49,51 @@
 
       <slot v-else></slot>
     </view>
-    
+
     <!-- 文件列表 -->
     <view v-if="showList && fileList.length > 0" class="im-upload__list">
-      <view 
-        v-for="(file, index) in fileList"
-        :key="file.uid"
-        class="im-upload__item"
-        :class="`im-upload__item--${listType}`"
-      >
+      <view v-for="(file, index) in fileList" :key="file.uid" class="im-upload__item"
+        :class="`im-upload__item--${listType}`">
         <!-- 图片列表 -->
         <template v-if="listType === 'picture'">
           <view class="im-upload__item-preview">
-            <image 
-              v-if="file.type?.startsWith('image/')"
-              class="im-upload__item-image"
-              :src="file.url || file.thumbUrl"
-              mode="aspectFill"
-              @tap="handlePreview(file)"
-            />
+            <image v-if="file.type?.startsWith('image/')" class="im-upload__item-image" :src="file.url || file.thumbUrl"
+              mode="aspectFill" @tap="handlePreview(file)" />
             <view v-else class="im-upload__item-file">
               <text class="im-upload__item-file-icon">📄</text>
               <text class="im-upload__item-file-name" @tap="handlePreview(file)">
                 {{ file.name }}
               </text>
             </view>
-            
+
             <!-- 上传状态 -->
             <view v-if="file.status === 'uploading'" class="im-upload__item-status">
               <view class="im-upload__item-progress">
-                <view 
-                  class="im-upload__item-progress-bar"
-                  :style="{ width: `${file.progress || 0}%` }"
-                ></view>
+                <view class="im-upload__item-progress-bar" :style="{ width: `${file.progress || 0}%` }"></view>
               </view>
               <text class="im-upload__item-percent">{{ file.progress || 0 }}%</text>
             </view>
-            
+
             <view v-else-if="file.status === 'error'" class="im-upload__item-error">
               <text class="im-upload__item-error-text">上传失败</text>
-              <text 
-                v-if="!readonly"
-                class="im-upload__item-retry"
-                @tap="handleRetry(file, index)"
-              >
+              <text v-if="!readonly" class="im-upload__item-retry" @tap="handleRetry(file, index)">
                 重试
               </text>
             </view>
-            
+
             <!-- 操作按钮 -->
             <view class="im-upload__item-actions">
-              <text 
-                v-if="file.status === 'done' && previewable"
-                class="im-upload__item-action"
-                @tap="handlePreview(file)"
-              >
+              <text v-if="file.status === 'done' && previewable" class="im-upload__item-action"
+                @tap="handlePreview(file)">
                 👁️
               </text>
-              <text 
-                v-if="!readonly && removable"
-                class="im-upload__item-action"
-                @tap="handleRemove(file, index)"
-              >
+              <text v-if="!readonly && removable" class="im-upload__item-action" @tap="handleRemove(file, index)">
                 ✕
               </text>
             </view>
           </view>
         </template>
-        
+
         <!-- 文本列表 -->
         <template v-else>
           <view class="im-upload__item-text">
@@ -146,35 +108,25 @@
               </text>
             </view>
           </view>
-          
+
           <!-- 操作按钮 -->
           <view v-if="!readonly" class="im-upload__item-text-actions">
-            <text 
-              v-if="file.status === 'error'"
-              class="im-upload__item-text-action"
-              @tap="handleRetry(file, index)"
-            >
+            <text v-if="file.status === 'error'" class="im-upload__item-text-action" @tap="handleRetry(file, index)">
               重试
             </text>
-            <text 
-              v-if="file.status === 'done' && previewable"
-              class="im-upload__item-text-action"
-              @tap="handlePreview(file)"
-            >
+            <text v-if="file.status === 'done' && previewable" class="im-upload__item-text-action"
+              @tap="handlePreview(file)">
               预览
             </text>
-            <text 
-              v-if="removable"
-              class="im-upload__item-text-action im-upload__item-text-action--remove"
-              @tap="handleRemove(file, index)"
-            >
+            <text v-if="removable" class="im-upload__item-text-action im-upload__item-text-action--remove"
+              @tap="handleRemove(file, index)">
               删除
             </text>
           </view>
         </template>
       </view>
     </view>
-    
+
     <!-- 上传提示 -->
     <view v-if="showTip" class="im-upload__tip">
       <text class="im-upload__tip-text">{{ tip }}</text>
@@ -182,27 +134,15 @@
         已选择 {{ fileList.length }} 个文件
       </text>
     </view>
-    
+
     <!-- 操作按钮 -->
     <view v-if="showActions && fileList.length > 0 && !readonly" class="im-upload__actions">
-      <im-button 
-        v-if="showUploadAll"
-        type="primary" 
-        size="small"
-        :loading="uploadingAll"
-        :disabled="uploadingAll || disabled"
-        @click="handleUploadAll"
-      >
+      <im-button v-if="showUploadAll" type="primary" size="small" :loading="uploadingAll"
+        :disabled="uploadingAll || disabled" @click="handleUploadAll">
         {{ uploadingAll ? '上传中...' : '全部上传' }}
       </im-button>
-      
-      <im-button 
-        v-if="showClear"
-        type="default" 
-        size="small"
-        :disabled="disabled"
-        @click="handleClearAll"
-      >
+
+      <im-button v-if="showClear" type="default" size="small" :disabled="disabled" @click="handleClearAll">
         清空列表
       </im-button>
     </view>
@@ -212,6 +152,9 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import ImButton from '../im-button/im-button.vue'
+import { chooseFile } from './utils/file-chooser'
+import { isFileTypeAccepted } from './utils/file-validator'
+import { createFileFromUniFile } from './utils/file-adapter'
 
 // 定义文件类型
 interface UploadFile {
@@ -226,33 +169,33 @@ interface UploadFile {
   response?: any
   error?: Error
   rawFile?: any
-  file?: File
+  file?: Object
 }
 
 // 定义 Props
 interface Props {
   // 值
   modelValue?: UploadFile[]
-  
+
   // 上传类型
   type?: 'button' | 'card' | 'avatar' | 'drag' | undefined
-  
+
   // 按钮配置
   buttonText?: string
-  buttonType?:  'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' // 'primary' | 'default' | 'warning' | 'error'
+  buttonType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' // 'primary' | 'default' | 'warning' | 'error'
   buttonSize?: 'small' | 'medium' | 'large'
-  
+
   // 卡片配置
   cardText?: string
-  
+
   // 头像配置
   avatarText?: string
   avatarSize?: number | string
   avatarRadius?: string
-  
+
   // 拖拽配置
   dragText?: string
-  
+
   // 通用配置
   hint?: string
   tip?: string
@@ -260,14 +203,14 @@ interface Props {
   showActions?: boolean
   showUploadAll?: boolean
   showClear?: boolean
-  
+
   // 文件配置
   accept?: string // 比如：image/*,.pdf,.doc,.docx
   multiple?: boolean
   maxCount?: number
   maxSize?: number // 单位：字节
-  beforeUpload?: (file: File) => boolean | Promise<boolean> // 上传前钩子
-  
+  beforeUpload?: (file: Object) => boolean | Promise<boolean> // 上传前钩子
+
   // 上传配置
   action?: string
   accessToken?: string,
@@ -277,36 +220,36 @@ interface Props {
   withCredentials?: boolean
   timeout?: number
   autoUpload?: boolean
-  
+
   // 响应格式化
-  responseFormatter?: (response: any) => { url: string; [key: string]: any }
-  
+  responseFormatter?: (response: any) => { url: string;[key: string]: any }
+
   // 列表配置
   showList?: boolean
   listType?: 'text' | 'picture'
   removable?: boolean
   previewable?: boolean
-  
+
   // 状态
   disabled?: boolean
   readonly?: boolean
-  
+
   // 自定义上传
-  customRequest?: (file: File, onProgress: (percent: number) => void) => Promise<any>
+  customRequest?: (file: Object, onProgress: (percent: number) => void) => Promise<any>
 }
 
 // 定义 Emits
 interface Emits {
   (e: 'update:modelValue', files: UploadFile[]): void
   (e: 'change', files: UploadFile[]): void
-  (e: 'select', file: File): void
+  (e: 'select', file: Object): void
   (e: 'upload', file: UploadFile): void
   (e: 'success', response: any, file: UploadFile): void
   (e: 'error', error: Error, file: UploadFile): void
   (e: 'progress', percent: number, file: UploadFile): void
   (e: 'remove', file: UploadFile, index: number): void
   (e: 'preview', file: UploadFile): void
-  (e: 'exceed', files: File[]): void
+  (e: 'exceed', files: Object[]): void
   (e: 'before-upload', file: UploadFile): void
   (e: 'after-upload', file: UploadFile): void
 }
@@ -314,54 +257,54 @@ interface Emits {
 // 定义 Props 默认值
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
-  
+
   type: undefined, // 'button',
-  
+
   buttonText: '上传文件',
   buttonType: 'primary',
   buttonSize: 'medium',
-  
+
   cardText: '点击上传',
-  
+
   avatarText: '上传头像',
   avatarSize: 120,
   avatarRadius: '50%',
-  
+
   dragText: '将文件拖到此处，或点击上传',
-  
+
   tip: '支持上传图片、文档等文件',
   showTip: false,
   showActions: false,
   showUploadAll: true,
   showClear: true,
-  
+
   accept: '*',
   multiple: false,
   maxCount: 9,
   maxSize: 10 * 1024 * 1024,
-  
+
   action: '',
-  accessToken:'',
+  accessToken: '',
   headers: () => ({}),
   data: () => ({}),
   name: 'file',
   withCredentials: false,
   timeout: 10000,
   autoUpload: true,
-  
-  responseFormatter: (response:any) => {
-      return {
-        url: response?.data?.url || response?.result?.url || response?.url || response?.fileUrl,
-        name: response?.data?.fileName || response?.result?.fileName ||response?.data?.name ||response?.result?.name ||response?.name,
-        ...response
-      }
+
+  responseFormatter: (response: any) => {
+    return {
+      url: response?.data?.url || response?.result?.url || response?.url || response?.fileUrl,
+      name: response?.data?.fileName || response?.result?.fileName || response?.data?.name || response?.result?.name || response?.name,
+      ...response
+    }
   },
-  
+
   showList: false,
   listType: 'picture',
   removable: true,
   previewable: true,
-  
+
   disabled: false,
   readonly: false
 })
@@ -396,16 +339,16 @@ const generateUid = () => {
 // 格式化文件大小
 const formatSize = (bytes?: number) => {
   if (!bytes) return '0 B'
-  
+
   const units = ['B', 'KB', 'MB', 'GB']
   let size = bytes
   let unitIndex = 0
-  
+
   while (size >= 1024 && unitIndex < units.length - 1) {
     size /= 1024
     unitIndex++
   }
-  
+
   return `${size.toFixed(1)} ${units[unitIndex]}`
 }
 
@@ -425,10 +368,10 @@ const handleUploadTap = async () => {
   if (props.disabled || props.readonly) {
     return
   }
-  
-  const maxSelectable = props.multiple ? 
+
+  const maxSelectable = props.multiple ?
     Math.max(0, props.maxCount! - fileList.value.length) : 1
-  
+
   if (maxSelectable <= 0) {
     emit('exceed', [])
     uni.showToast({
@@ -437,24 +380,41 @@ const handleUploadTap = async () => {
     })
     return
   }
-  
-  uni.chooseFile({
-    count: maxSelectable,
-    type: getFileType(props.accept),
-    extension: getFileExtensions(props.accept),
-    success: async (res) => {
-      for (const tempFile of res.tempFiles as Array<any>) {
-        await processFile(tempFile)
-      }
-    },
-    fail: (err) => {
-      console.error('选择文件失败:', err)
-      uni.showToast({
-        title: '选择文件失败',
-        icon: 'none'
-      })
+
+  try {
+    const res = await chooseFile({
+      count: 9,
+      type: getFileType(props.accept) //'image' // image, video, all
+    })
+    for (const tempFile of res.tempFiles as Array<any>) {
+      await processFile(tempFile)
     }
-  })
+  } catch (error) {
+    console.error('选择文件失败:', error)
+    uni.showToast({
+      title: '选择文件失败',
+      icon: 'none'
+    })
+  }
+
+
+  // uni.chooseFile({
+  //   count: maxSelectable,
+  //   type: getFileType(props.accept),
+  //   extension: getFileExtensions(props.accept),
+  //   success: async (res) => {
+  //     for (const tempFile of res.tempFiles as Array<any>) {
+  //       await processFile(tempFile)
+  //     }
+  //   },
+  //   fail: (err) => {
+  //     console.error('选择文件失败:', err)
+  //     uni.showToast({
+  //       title: '选择文件失败',
+  //       icon: 'none'
+  //     })
+  //   }
+  // })
 }
 
 // 获取文件类型
@@ -469,13 +429,13 @@ const getFileExtensions = (accept: string): string[] | undefined => {
   if (accept === '*' || accept.includes('all')) {
     return undefined
   }
-  
+
   const extensions = accept
     .split(',')
     .map(ext => ext.trim())
     .filter(ext => ext.startsWith('.'))
     .map(ext => ext.substring(1))
-  
+
   return extensions.length > 0 ? extensions : undefined
 }
 
@@ -489,19 +449,19 @@ const processFile = async (uniFile: any) => {
     })
     return
   }
-  
+
   // 检查文件类型
-  if (!isFileTypeAccepted(uniFile)) {
+  if (!isFileTypeAccepted(uniFile, props.accept)) {
     uni.showToast({
       title: '不支持的文件类型',
       icon: 'none'
     })
     return
   }
-  
+
   // 创建文件对象
   const file = createFileFromUniFile(uniFile)
-  
+
   // 执行上传前钩子
   if (props.beforeUpload) {
     try {
@@ -514,7 +474,7 @@ const processFile = async (uniFile: any) => {
       return
     }
   }
-  
+
   // 创建上传文件对象
   const uploadFile: UploadFile = {
     uid: generateUid(),
@@ -528,78 +488,78 @@ const processFile = async (uniFile: any) => {
     rawFile: uniFile,
     file
   }
-  
+
   // 添加到文件列表
   if (!props.multiple) {
     fileList.value = [uploadFile]
   } else {
     fileList.value.push(uploadFile)
   }
-  
+
   emit('select', file)
   updateFileList()
-  
+
   // 自动上传
   if (props.autoUpload && (props.action || props.customRequest)) {
     await startUpload(uploadFile)
   }
 }
 
-// 检查文件类型是否被接受
-const isFileTypeAccepted = (uniFile: any): boolean => {
-  if (props.accept === '*') return true
-  
-  const acceptTypes = props.accept.split(',').map(type => type.trim())
-  
-  for (const acceptType of acceptTypes) {
-    if (acceptType === '*') return true
-    
-    // 检查 MIME 类型
-    if (acceptType.endsWith('/*')) {
-      const category = acceptType.split('/')[0]
-      if (uniFile.type?.startsWith(category + '/')) {
-        return true
-      }
-    }
-    
-    // 检查扩展名
-    if (acceptType.startsWith('.')) {
-      const ext = acceptType.substring(1).toLowerCase()
-      const fileName = uniFile.name.toLowerCase()
-      if (fileName.endsWith('.' + ext)) {
-        return true
-      }
-    }
-    
-    // 检查完整 MIME 类型
-    if (uniFile.type === acceptType) {
-      return true
-    }
-  }
-  
-  return false
-}
+// // 检查文件类型是否被接受
+// const isFileTypeAccepted = (uniFile: any): boolean => {
+//   if (props.accept === '*') return true
+
+//   const acceptTypes = props.accept.split(',').map(type => type.trim())
+
+//   for (const acceptType of acceptTypes) {
+//     if (acceptType === '*') return true
+
+//     // 检查 MIME 类型
+//     if (acceptType.endsWith('/*')) {
+//       const category = acceptType.split('/')[0]
+//       if (uniFile.type?.startsWith(category + '/')) {
+//         return true
+//       }
+//     }
+
+//     // 检查扩展名
+//     if (acceptType.startsWith('.')) {
+//       const ext = acceptType.substring(1).toLowerCase()
+//       const fileName = uniFile.name.toLowerCase()
+//       if (fileName.endsWith('.' + ext)) {
+//         return true
+//       }
+//     }
+
+//     // 检查完整 MIME 类型
+//     if (uniFile.type === acceptType) {
+//       return true
+//     }
+//   }
+
+//   return false
+// }
 
 // 从 uniapp 文件创建 File 对象
-const createFileFromUniFile = (uniFile: any): File => {
-  const file = new File([], uniFile.name, {
-    type: uniFile.type || 'application/octet-stream',
-    lastModified: uniFile.lastModified || Date.now()
-  })
-  
-  Object.defineProperties(file, {
-    size: {
-      value: uniFile.size,
-      writable: false
-    },
-    path: {
-      value: uniFile.path,
-      writable: false
-    }
-  })
-  
-  return file
-}
+// const createFileFromUniFile = (uniFile: any): File => {
+//   const file = new File([], uniFile.name, {
+//     type: uniFile.type || 'application/octet-stream',
+//     lastModified: uniFile.lastModified || Date.now()
+//   })
+
+//   Object.defineProperties(file, {
+//     size: {
+//       value: uniFile.size,
+//       writable: false
+//     },
+//     path: {
+//       value: uniFile.path,
+//       writable: false
+//     }
+//   })
+
+//   return file
+// }
 
 // 开始上传
 const startUpload = async (uploadFile: UploadFile) => {
@@ -608,10 +568,10 @@ const startUpload = async (uploadFile: UploadFile) => {
   emit('upload', uploadFile)
   emit('before-upload', uploadFile)
   updateFileList()
-  
+
   try {
     let response: any
-    
+
     if (props.customRequest) {
       // 使用自定义上传函数
       response = await props.customRequest(
@@ -628,7 +588,7 @@ const startUpload = async (uploadFile: UploadFile) => {
     } else {
       throw new Error('请设置上传地址或自定义上传函数')
     }
-    
+
     // 格式化响应数据
     const formattedResponse = props.responseFormatter(response)
 
@@ -636,13 +596,13 @@ const startUpload = async (uploadFile: UploadFile) => {
     uploadFile.progress = 100
     uploadFile.response = formattedResponse
     uploadFile.url = formattedResponse.url || uploadFile.url
-    
+
     emit('success', formattedResponse, uploadFile)
   } catch (error) {
     uploadFile.status = 'error'
     uploadFile.error = error as Error
     emit('error', error as Error, uploadFile)
-    
+
     uni.showToast({
       title: `${uploadFile.name} 上传失败`,
       icon: 'none'
@@ -655,11 +615,11 @@ const startUpload = async (uploadFile: UploadFile) => {
 
 // 默认上传实现
 const defaultUpload = (uploadFile: UploadFile): Promise<any> => {
-		const headers = {
-      ...props.headers,
-			'Authorization': `Bearer ${props.accessToken}`,
-			'AccessToken': props.accessToken,
-		}
+  const headers = {
+    ...props.headers,
+    'Authorization': `Bearer ${props.accessToken}`,
+    'AccessToken': props.accessToken,
+  }
 
   return new Promise((resolve, reject) => {
     uni.uploadFile({
@@ -692,21 +652,21 @@ const defaultUpload = (uploadFile: UploadFile): Promise<any> => {
       complete: () => {
         // 上传完成
       },
-      fail: (e: any)=>{
+      fail: (e: any) => {
         reject(e)
       }
     })
-    
+
     // // 监听上传进度
     // task.onProgressUpdate = (res:any) => {
     //   uploadFile.progress = res.progress
     //   emit('progress', res.progress, uploadFile)
     //   updateFileList()
     // }
-    
+
     // 保存任务用于取消
     // uploadTasks.set(uploadFile.uid, task)
-    
+
     // // 上传完成后清理
     // task.then(() => {
     //   uploadTasks.delete(uploadFile.uid)
@@ -727,7 +687,7 @@ const handleRemove = (file: UploadFile, index: number) => {
   if (props.disabled || props.readonly) {
     return
   }
-  
+
   // 如果正在上传，先取消上传
   if (file.status === 'uploading') {
     const task = uploadTasks.get(file.uid)
@@ -736,7 +696,7 @@ const handleRemove = (file: UploadFile, index: number) => {
       uploadTasks.delete(file.uid)
     }
   }
-  
+
   fileList.value.splice(index, 1)
   emit('remove', file, index)
   updateFileList()
@@ -747,7 +707,7 @@ const handleRetry = async (file: UploadFile, index: number) => {
   if (props.disabled || props.readonly) {
     return
   }
-  
+
   await startUpload(file)
 }
 
@@ -756,9 +716,9 @@ const handlePreview = (file: UploadFile) => {
   if (!props.previewable) {
     return
   }
-  
+
   emit('preview', file)
-  
+
   // 如果是图片，使用 uni.previewImage
   if (file.url && file.type?.startsWith('image/')) {
     uni.previewImage({
@@ -784,11 +744,11 @@ const handleUploadAll = async () => {
   if (props.disabled || props.readonly || !props.action) {
     return
   }
-  
-  const pendingFiles = fileList.value.filter(file => 
+
+  const pendingFiles = fileList.value.filter(file =>
     file.status === 'pending' || file.status === 'error'
   )
-  
+
   if (pendingFiles.length === 0) {
     uni.showToast({
       title: '没有需要上传的文件',
@@ -796,13 +756,13 @@ const handleUploadAll = async () => {
     })
     return
   }
-  
+
   uploadingAll.value = true
-  
+
   for (const file of pendingFiles) {
     await startUpload(file)
   }
-  
+
   uploadingAll.value = false
 }
 
@@ -811,14 +771,14 @@ const handleClearAll = () => {
   if (props.disabled || props.readonly) {
     return
   }
-  
+
   // 取消所有进行中的上传
   uploadTasks.forEach(task => task.abort())
   uploadTasks.clear()
-  
+
   fileList.value = []
   updateFileList()
-  
+
   uni.showToast({
     title: '已清空文件列表',
     icon: 'success'
@@ -836,16 +796,16 @@ const upload = async (file: File) => {
     progress: 0,
     file: file
   }
-  
+
   if (!props.multiple) {
     fileList.value = [uploadFile]
   } else {
     fileList.value.push(uploadFile)
   }
-  
+
   emit('select', file)
   updateFileList()
-  
+
   await startUpload(uploadFile)
 }
 
@@ -860,7 +820,7 @@ const abortUpload = (uid: string) => {
   if (task) {
     task.abort()
     uploadTasks.delete(uid)
-    
+
     const file = fileList.value.find(f => f.uid === uid)
     if (file) {
       file.status = 'error'
@@ -883,12 +843,12 @@ defineExpose({
 <style lang="scss" scoped>
 .im-upload__area {
   position: relative;
-  
+
   &--disabled {
     opacity: 0.6;
     pointer-events: none;
   }
-  
+
   &--drag-over {
     border-color: #409eff !important;
     background-color: #ecf5ff !important;
@@ -921,7 +881,7 @@ defineExpose({
   border-radius: 8rpx;
   background-color: #fafafa;
   transition: all 0.3s;
-  
+
   &:active {
     border-color: #409eff;
     background-color: #ecf5ff;
@@ -972,7 +932,7 @@ defineExpose({
   border-radius: 8rpx;
   background-color: #fafafa;
   transition: all 0.3s;
-  
+
   &:active {
     border-color: #409eff;
     background-color: #ecf5ff;
@@ -1003,7 +963,7 @@ defineExpose({
   &--picture {
     margin-bottom: 24rpx;
   }
-  
+
   &--text {
     display: flex;
     justify-content: space-between;
@@ -1132,7 +1092,7 @@ defineExpose({
   border-radius: 50%;
   font-size: 24rpx;
   cursor: pointer;
-  
+
   &:active {
     background-color: rgba(0, 0, 0, 0.8);
   }
@@ -1165,19 +1125,19 @@ defineExpose({
 
 .im-upload__item-status-text {
   font-size: 24rpx;
-  
+
   &--pending {
     color: #909399;
   }
-  
+
   &--uploading {
     color: #409eff;
   }
-  
+
   &--done {
     color: #52c41a;
   }
-  
+
   &--error {
     color: #ff4d4f;
   }
@@ -1197,14 +1157,14 @@ defineExpose({
   font-size: 26rpx;
   color: #409eff;
   cursor: pointer;
-  
+
   &:active {
     color: #337ecc;
   }
-  
+
   &--remove {
     color: #ff4d4f;
-    
+
     &:active {
       color: #d9363e;
     }