im-ui-mobile 0.1.16 → 0.1.17

package/components/im-col/im-col.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, useSlots, inject } from 'vue'
+import { computed, inject } from 'vue'
 
 // 定义 Props
 interface Props {

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

@@ -10,10 +10,10 @@
       <!-- 按钮类型 -->
       <template v-if="type === 'button'">
         <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>
+          <!-- <view>  -->
+          <text v-if="!uploading" class="im-upload__icon">+</text>
+          <text class="im-upload__text">{{ uploading ? '上传中...' : buttonText }}</text>
+          <!-- </view> -->
         </im-button>
       </template>
 
@@ -29,9 +29,9 @@
       <!-- 头像类型 -->
       <template v-else-if="type === 'avatar'">
         <view class="im-upload__avatar">
-          <im-avatar :src="fileList[0]?.url" :size="avatarSize" :radius="avatarRadius">
+          <im-avatar :url="fileList[0]?.url" :size="avatarSize" :radius="avatarRadius">
             <template v-if="!fileList[0]?.url">
-              <text class="im-upload__avatar-icon">+</text>
+              <im-icon name="plus" size="40" color="#8c939d" />
             </template>
           </im-avatar>
           <text class="im-upload__avatar-text">{{ avatarText }}</text>
@@ -57,7 +57,7 @@
         <!-- 图片列表 -->
         <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"
+            <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>
@@ -83,10 +83,6 @@
 
             <!-- 操作按钮 -->
             <view class="im-upload__item-actions">
-              <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>
@@ -176,7 +172,7 @@ interface UploadFile {
 // 定义 Props
 interface Props {
   // 值
-  modelValue?: UploadFile[]
+  modelValue?: string | UploadFile[]
 
   // 上传类型
   type?: 'button' | 'card' | 'avatar' | 'drag' | undefined
@@ -241,18 +237,17 @@ interface Props {
 
 // 定义 Emits
 interface Emits {
-  (e: 'update:modelValue', files: UploadFile[]): void
-  (e: 'change', files: UploadFile[]): void
+  (e: 'update:modelValue', files: string | UploadFile[]): void
+  (e: 'change', files: string | UploadFile[]): void
   (e: 'select', file: Object): void
-  (e: 'upload', file: UploadFile): void
-  (e: 'success', response: any, file: UploadFile): void
+  (e: 'success', 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: Object[]): void
-  (e: 'before-upload', file: UploadFile): void
-  (e: 'after-upload', file: UploadFile): void
+  (e: 'uploading', file: UploadFile): void
+  (e: 'uploaded', file: UploadFile): void
 }
 
 // 定义 Props 默认值
@@ -294,6 +289,7 @@ const props = withDefaults(defineProps<Props>(), {
   autoUpload: true,
 
   responseFormatter: (response: any) => {
+    console.log('responseFormatter', response)
     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,
@@ -313,7 +309,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 // 响应式状态
-const fileList = ref<UploadFile[]>(props.modelValue || [])
+const fileList = ref<UploadFile[]>([]) //props.modelValue || []
 const dragOver = ref(false)
 const uploadingAll = ref(false)
 
@@ -322,8 +318,19 @@ const uploadTasks = new Map<string, UniApp.UploadTask>()
 
 // 监听 modelValue 变化
 watch(() => props.modelValue, (val) => {
-  if (val) {
-    fileList.value = val
+  if (!val) return
+
+  if (isSingleFile()) {
+    fileList.value = [{
+      url: String(props.modelValue),
+      uid: '',
+      name: 'single file',
+      size: 0,
+      status: 'uploading'
+    }]
+  }
+  else {
+    fileList.value = val as UploadFile[]
   }
 }, { deep: true })
 
@@ -334,7 +341,7 @@ const uploading = computed(() => {
 
 // 生成唯一ID
 const generateUid = () => {
-  return Date.now() + '-' + Math.random().toString(36).substr(2, 9)
+  return Date.now() + '-' + Math.random().toString(36).substring(2, 9)
 }
 
 // 格式化文件大小
@@ -370,8 +377,13 @@ const handleUploadTap = async () => {
     return
   }
 
-  const maxSelectable = props.multiple ?
-    Math.max(0, props.maxCount! - fileList.value.length) : 1
+  let accept = getFileType(props.accept) // image, video, all
+  let maxSelectable = props.multiple ? Math.max(0, props.maxCount! - fileList.value.length) : 1
+
+  if (props.type === 'avatar') {
+    accept = 'image'
+    maxSelectable = 1
+  }
 
   if (maxSelectable <= 0) {
     emit('exceed', [])
@@ -384,9 +396,10 @@ const handleUploadTap = async () => {
 
   try {
     const res = await chooseFile({
-      count: 9,
-      type: getFileType(props.accept) //'image' // image, video, all
+      count: maxSelectable,
+      type: accept
     })
+
     for (const tempFile of res.tempFiles as Array<any>) {
       await processFile(tempFile)
     }
@@ -397,25 +410,6 @@ const handleUploadTap = async () => {
       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'
-  //     })
-  //   }
-  // })
 }
 
 // 获取文件类型
@@ -425,19 +419,9 @@ const getFileType = (accept: string): 'image' | 'video' | 'all' => {
   return 'all'
 }
 
-// 获取文件扩展名
-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
+// 是否仅上传单个文件
+const isSingleFile = () => {
+  return typeof props.modelValue === 'string' || props.type === 'avatar' || !props.multiple
 }
 
 // 处理文件
@@ -485,7 +469,7 @@ const processFile = async (uniFile: any) => {
     status: 'pending',
     progress: 0,
     url: uniFile.path,
-    thumbUrl: uniFile.type?.startsWith('image/') ? uniFile.path : undefined,
+    thumbUrl: uniFile.type?.startsWith('image') ? uniFile.path : undefined,
     rawFile: uniFile,
     file
   }
@@ -493,6 +477,7 @@ const processFile = async (uniFile: any) => {
   // 添加到文件列表
   if (!props.multiple) {
     fileList.value = [uploadFile]
+
   } else {
     fileList.value.push(uploadFile)
   }
@@ -506,69 +491,13 @@ const processFile = async (uniFile: any) => {
   }
 }
 
-// // 检查文件类型是否被接受
-// 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 startUpload = async (uploadFile: UploadFile) => {
   uploadFile.status = 'uploading'
   uploadFile.progress = 0
-  emit('upload', uploadFile)
-  emit('before-upload', uploadFile)
-  updateFileList()
+  emit('uploading', uploadFile)
+
+  // updateFileList()
 
   try {
     let response: any
@@ -580,7 +509,7 @@ const startUpload = async (uploadFile: UploadFile) => {
         (percent) => {
           uploadFile.progress = percent
           emit('progress', percent, uploadFile)
-          updateFileList()
+          updateFileList(uploadFile)
         }
       )
     } else if (props.action) {
@@ -598,7 +527,7 @@ const startUpload = async (uploadFile: UploadFile) => {
     uploadFile.response = formattedResponse
     uploadFile.url = formattedResponse.url || uploadFile.url
 
-    emit('success', formattedResponse, uploadFile)
+    emit('success', uploadFile)
   } catch (error) {
     uploadFile.status = 'error'
     uploadFile.error = error as Error
@@ -609,17 +538,21 @@ const startUpload = async (uploadFile: UploadFile) => {
       icon: 'none'
     })
   } finally {
-    emit('after-upload', uploadFile)
-    updateFileList()
+    emit('uploaded', uploadFile)
+    updateFileList(uploadFile)
   }
 }
 
 // 默认上传实现
 const defaultUpload = (uploadFile: UploadFile): Promise<any> => {
-  const headers = {
-    ...props.headers,
-    'Authorization': `Bearer ${props.accessToken}`,
-    'AccessToken': props.accessToken,
+  let headers = props.headers
+
+  if (props.accessToken) {
+    headers = {
+      ...headers,
+      'Authorization': `Bearer ${props.accessToken}`,
+      'AccessToken': props.accessToken,
+    }
   }
 
   return universalUploadFile({
@@ -636,43 +569,17 @@ const defaultUpload = (uploadFile: UploadFile): Promise<any> => {
     timeout: props.timeout,
     withCredentials: props.withCredentials
   })
-
-  // return new Promise((resolve, reject) => {
-  //   uni.uploadFile({
-  //     url: props.action!,
-  //     filePath: uploadFile.rawFile.path,
-  //     name: props.name,
-  //     formData: {
-  //       ...props.data,
-  //       filename: uploadFile.name,
-  //       size: uploadFile.size,
-  //       type: uploadFile.type
-  //     },
-  //     header: headers,
-  //     timeout: props.timeout,
-  //     withCredentials: props.withCredentials,
-  //     success: (res: any) => {
-  //       try {
-  //         const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
-  //         resolve(data)
-  //       } catch (e: any) {
-  //         reject(e)
-  //       }
-  //     },
-  //     complete: () => {
-  //       // 上传完成
-  //     },
-  //     fail: (e: any) => {
-  //       reject(e)
-  //     }
-  //   })
-  // })
 }
 
 // 更新文件列表
-const updateFileList = () => {
+const updateFileList = (uploadFile?: UploadFile) => {
   emit('change', [...fileList.value])
-  emit('update:modelValue', [...fileList.value])
+
+  if (isSingleFile()) {
+    emit('update:modelValue', String(uploadFile?.url))
+  } else {
+    emit('update:modelValue', [...fileList.value])
+  }
 }
 
 // 处理删除
@@ -713,7 +620,7 @@ const handlePreview = (file: UploadFile) => {
   emit('preview', file)
 
   // 如果是图片，使用 uni.previewImage
-  if (file.url && file.type?.startsWith('image/')) {
+  if (file.url && file.type?.startsWith('image')) {
     uni.previewImage({
       urls: [file.url],
       current: file.url
@@ -778,30 +685,6 @@ const handleClearAll = () => {
   })
 }
 
-// 手动上传文件
-const upload = async (file: File) => {
-  const uploadFile: UploadFile = {
-    uid: generateUid(),
-    name: file.name,
-    size: file.size,
-    type: file.type,
-    status: 'pending',
-    progress: 0,
-    file: file
-  }
-
-  if (!props.multiple) {
-    fileList.value = [uploadFile]
-  } else {
-    fileList.value.push(uploadFile)
-  }
-
-  emit('select', file)
-  updateFileList()
-
-  await startUpload(uploadFile)
-}
-
 // 清空文件列表
 const clearFiles = () => {
   handleClearAll()
@@ -825,7 +708,6 @@ const abortUpload = (uid: string) => {
 
 // 暴露方法给父组件
 defineExpose({
-  upload,
   clearFiles,
   abortUpload,
   uploadAll: handleUploadAll,
@@ -905,11 +787,6 @@ defineExpose({
   gap: 20rpx;
 }
 
-.im-upload__avatar-icon {
-  font-size: 40rpx;
-  color: #8c939d;
-}
-
 .im-upload__avatar-text {
   font-size: 26rpx;
   color: #606266;
@@ -949,12 +826,15 @@ defineExpose({
 }
 
 .im-upload__list {
-  margin-top: 32rpx;
+  // margin-top: 20rpx;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .im-upload__item {
   &--picture {
-    margin-bottom: 24rpx;
+    margin-top: 20rpx;
+    margin-right: 20rpx;
   }
 
   &--text {
@@ -1066,12 +946,6 @@ defineExpose({
   right: 8rpx;
   display: flex;
   gap: 8rpx;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.im-upload__item-preview:hover .im-upload__item-actions {
-  opacity: 1;
 }
 
 .im-upload__item-action {

package/components/im-upload/utils/file-adapter.ts

@@ -0,0 +1,214 @@
+// utils/file-adapter.ts
+
+/**
+ * 创建统一的文件对象（多平台兼容）
+ * @param {Object} rawFile - 原始文件数据
+ * @returns {Object} 统一格式的文件对象
+ */
+export const createFileFromUniFile = (rawFile: any): any => {
+    // 检查环境
+    // #ifdef H5
+    if (rawFile instanceof File) {
+        return rawFile
+    }
+    // #endif
+
+    const path = rawFile.path || rawFile.tempFilePath || rawFile.apFilePaths?.[0]
+    const name = rawFile.name || getFileNameFromPath(path)
+    const size = rawFile.size || 0
+    const type = rawFile.type || getFileTypeFromPath(name)
+
+    // 创建统一的文件对象
+    const unifiedFile = {
+        // 基础属性
+        path,
+        name,
+        size,
+        type,
+        lastModified: rawFile.lastModified || Date.now(),
+
+        // 原始数据
+        raw: rawFile,
+
+        // 方法（模拟 File 对象的部分行为）
+        slice(start: any, end: any) {
+            // 小程序环境不支持实际切片，返回一个标记对象
+            return {
+                path: this.path,
+                name: this.name,
+                size: end - start,
+                type: this.type,
+                slice: () => { }
+            }
+        },
+
+        // 转换为 base64（异步）
+        toBase64() {
+            return new Promise((resolve: any, reject: any) => {
+                // #ifdef MP-WEIXIN
+                wx.getFileSystemManager().readFile({
+                    filePath: this.path,
+                    encoding: 'base64',
+                    success: (res: any) => resolve(res.data),
+                    fail: reject
+                })
+                // #endif
+
+                // #ifdef H5
+                const reader = new FileReader()
+                reader.onload = () => resolve(reader.result.split(',')[1])
+                reader.onerror = reject
+                reader.readAsDataURL(this)
+                // #endif
+
+                // #ifdef APP-PLUS
+                plus.io.resolveLocalFileSystemURL(this.path, (entry: any) => {
+                    entry.file((file: any) => {
+                        const reader = new plus.io.FileReader()
+                        reader.onload = (e: any) => resolve(e.target.result.split(',')[1])
+                        reader.onerror = reject
+                        reader.readAsDataURL(file)
+                    })
+                })
+                // #endif
+            })
+        },
+
+        // 转换为 ArrayBuffer（异步）
+        toArrayBuffer() {
+            return new Promise((resolve: any, reject: any) => {
+                // #ifdef MP-WEIXIN
+                wx.getFileSystemManager().readFile({
+                    filePath: this.path,
+                    success: (res: any) => resolve(res.data),
+                    fail: reject
+                })
+                // #endif
+
+                // #ifdef H5
+                const reader = new FileReader()
+                reader.onload = () => resolve(reader.result)
+                reader.onerror = reject
+                reader.readAsArrayBuffer(this)
+                // #endif
+            })
+        },
+
+        // 获取文件 URL（用于预览等）
+        getURL() {
+            // #ifdef H5
+            if (this.raw instanceof File) {
+                return URL.createObjectURL(this.raw)
+            }
+            // #endif
+            return this.path
+        },
+
+        // 释放资源
+        revoke() {
+            // #ifdef H5
+            if (this.raw instanceof File && this._objectURL) {
+                URL.revokeObjectURL(this._objectURL)
+            }
+            // #endif
+        }
+    }
+
+    // 如果是 H5 环境，尝试包装成 File 对象
+    // #ifdef H5
+    if (typeof File !== 'undefined' && !(rawFile instanceof File)) {
+        try {
+            // 尝试创建 File 对象（需要 fetch 支持）
+            return Object.assign(new Blob(), unifiedFile)
+        } catch (e) {
+            console.warn('无法创建 File 对象，使用统一格式:', e)
+        }
+    }
+    // #endif
+
+    return unifiedFile
+}
+
+/**
+ * 从文件路径提取文件名
+ */
+const getFileNameFromPath = (path: any): any => {
+    if (!path) return 'unnamed'
+    return path.split('/').pop().split('?')[0]
+}
+
+/**
+ * 从文件名获取文件类型
+ */
+const getFileTypeFromPath = (filename: any): any => {
+    if (!filename) return 'application/octet-stream'
+
+    const extension = filename.split('.').pop().toLowerCase()
+    const typeMap: any = {
+        // 图片
+        'jpg': 'image/jpeg',
+        'jpeg': 'image/jpeg',
+        'png': 'image/png',
+        'gif': 'image/gif',
+        'bmp': 'image/bmp',
+        'webp': 'image/webp',
+        'svg': 'image/svg+xml',
+
+        // 视频
+        'mp4': 'video/mp4',
+        'avi': 'video/x-msvideo',
+        'mov': 'video/quicktime',
+        'wmv': 'video/x-ms-wmv',
+        'flv': 'video/x-flv',
+        'mkv': 'video/x-matroska',
+
+        // 音频
+        'mp3': 'audio/mpeg',
+        'wav': 'audio/wav',
+        'aac': 'audio/aac',
+        'ogg': 'audio/ogg',
+        'flac': 'audio/flac',
+
+        // 文档
+        'pdf': 'application/pdf',
+        'doc': 'application/msword',
+        'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'xls': 'application/vnd.ms-excel',
+        'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'ppt': 'application/vnd.ms-powerpoint',
+        'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'txt': 'text/plain'
+    }
+
+    return typeMap[extension] || 'application/octet-stream'
+}
+
+/**
+ * 批量转换文件对象
+ */
+export const createFilesFromUniFiles = (rawFiles: any): any => {
+    if (!Array.isArray(rawFiles)) {
+        rawFiles = [rawFiles]
+    }
+
+    return rawFiles.map((file: any) => createFileFromUniFile(file))
+}
+
+/**
+ * 环境检测
+ */
+export const isBrowserEnv = (): any => {
+    // #ifdef H5
+    return typeof File !== 'undefined'
+    // #endif
+
+    return false
+}
+
+export const isWeChatEnv = (): any => {
+    // #ifdef MP-WEIXIN
+    return true
+    // #endif
+
+    return false
+}