im-ui-mobile 0.1.14 → 0.1.15

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

@@ -153,6 +153,8 @@
 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 {
@@ -167,7 +169,7 @@ interface UploadFile {
   response?: any
   error?: Error
   rawFile?: any
-  file?: File
+  file?: Object
 }
 
 // 定义 Props
@@ -207,7 +209,7 @@ interface Props {
   multiple?: boolean
   maxCount?: number
   maxSize?: number // 单位：字节
-  beforeUpload?: (file: File) => boolean | Promise<boolean> // 上传前钩子
+  beforeUpload?: (file: Object) => boolean | Promise<boolean> // 上传前钩子
 
   // 上传配置
   action?: string
@@ -233,21 +235,21 @@ interface Props {
   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
 }
@@ -449,7 +451,7 @@ const processFile = async (uniFile: any) => {
   }
 
   // 检查文件类型
-  if (!isFileTypeAccepted(uniFile)) {
+  if (!isFileTypeAccepted(uniFile, props.accept)) {
     uni.showToast({
       title: '不支持的文件类型',
       icon: 'none'
@@ -503,61 +505,61 @@ const processFile = async (uniFile: any) => {
   }
 }
 
-// 检查文件类型是否被接受
-const isFileTypeAccepted = (uniFile: any): boolean => {
-  if (props.accept === '*') return true
+// // 检查文件类型是否被接受
+// const isFileTypeAccepted = (uniFile: any): boolean => {
+//   if (props.accept === '*') return true
 
-  const acceptTypes = props.accept.split(',').map(type => type.trim())
+//   const acceptTypes = props.accept.split(',').map(type => type.trim())
 
-  for (const acceptType of acceptTypes) {
-    if (acceptType === '*') return true
+//   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
-      }
-    }
+//     // 检查 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
-      }
-    }
+//     // 检查扩展名
+//     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
-    }
-  }
+//     // 检查完整 MIME 类型
+//     if (uniFile.type === acceptType) {
+//       return true
+//     }
+//   }
 
-  return false
-}
+//   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) => {

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

@@ -0,0 +1,214 @@
+// utils/file-adapter.js
+
+/**
+ * 创建统一的文件对象（多平台兼容）
+ * @param {Object} rawFile - 原始文件数据
+ * @returns {Object} 统一格式的文件对象
+ */
+export const createFileFromUniFile = (rawFile) => {
+    // 检查环境
+    // #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, end) {
+            // 小程序环境不支持实际切片，返回一个标记对象
+            return {
+                path: this.path,
+                name: this.name,
+                size: end - start,
+                type: this.type,
+                slice: () => { }
+            }
+        },
+
+        // 转换为 base64（异步）
+        toBase64() {
+            return new Promise((resolve, reject) => {
+                // #ifdef MP-WEIXIN
+                wx.getFileSystemManager().readFile({
+                    filePath: this.path,
+                    encoding: 'base64',
+                    success: (res) => 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) => {
+                    entry.file((file) => {
+                        const reader = new plus.io.FileReader()
+                        reader.onload = (e) => resolve(e.target.result.split(',')[1])
+                        reader.onerror = reject
+                        reader.readAsDataURL(file)
+                    })
+                })
+                // #endif
+            })
+        },
+
+        // 转换为 ArrayBuffer（异步）
+        toArrayBuffer() {
+            return new Promise((resolve, reject) => {
+                // #ifdef MP-WEIXIN
+                wx.getFileSystemManager().readFile({
+                    filePath: this.path,
+                    success: (res) => 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) => {
+    if (!path) return 'unnamed'
+    return path.split('/').pop().split('?')[0]
+}
+
+/**
+ * 从文件名获取文件类型
+ */
+const getFileTypeFromPath = (filename) => {
+    if (!filename) return 'application/octet-stream'
+
+    const extension = filename.split('.').pop().toLowerCase()
+    const typeMap = {
+        // 图片
+        '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) => {
+    if (!Array.isArray(rawFiles)) {
+        rawFiles = [rawFiles]
+    }
+
+    return rawFiles.map(file => createFileFromUniFile(file))
+}
+
+/**
+ * 环境检测
+ */
+export const isBrowserEnv = () => {
+    // #ifdef H5
+    return typeof File !== 'undefined'
+    // #endif
+
+    return false
+}
+
+export const isWeChatEnv = () => {
+    // #ifdef MP-WEIXIN
+    return true
+    // #endif
+
+    return false
+}

package/components/im-upload/utils/file-validator.js

@@ -0,0 +1,306 @@
+// utils/file-validator.js
+
+/**
+ * 获取文件类型（多平台兼容）
+ */
+const getFileType = (file) => {
+    // 优先使用 MIME 类型判断
+    if (file.type) {
+        return file.type.split('/')[0] // image, video, audio, application
+    }
+
+    // 通过文件名后缀判断
+    const path = file.path || file.name || ''
+    const extension = path.split('.').pop().toLowerCase()
+
+    // 图片类型
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+    if (imageExtensions.includes(extension)) return 'image'
+
+    // 视频类型
+    const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm']
+    if (videoExtensions.includes(extension)) return 'video'
+
+    // 音频类型
+    const audioExtensions = ['mp3', 'wav', 'aac', 'ogg', 'flac', 'm4a']
+    if (audioExtensions.includes(extension)) return 'audio'
+
+    // 文档类型
+    const documentExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']
+    if (documentExtensions.includes(extension)) return 'document'
+
+    return 'other'
+}
+
+/**
+ * 统一文件类型映射（将自定义类型映射到平台支持的类型）
+ */
+const mapAcceptTypeToPlatform = (accept, platform) => {
+    const typeMap = {
+        image: {
+            wx: ['image'],
+            uni: ['image'],
+            alipay: ['image']
+        },
+        video: {
+            wx: ['video'],
+            uni: ['video'],
+            alipay: ['video']
+        },
+        audio: {
+            wx: ['file'],
+            uni: [],
+            alipay: []
+        },
+        all: {
+            wx: ['all'],
+            uni: ['all'],
+            alipay: ['all']
+        },
+        file: {
+            wx: ['file'],
+            uni: ['file'],
+            alipay: ['file']
+        }
+    }
+
+    return typeMap[accept]?.[platform] || [accept]
+}
+
+/**
+ * 检查文件类型是否被接受（多平台兼容）
+ * @param {File|Object} file - 文件对象
+ * @param {string|Array} accept - 接受的文件类型
+ * @returns {boolean}
+ */
+export const isFileTypeAccepted = (file, accept = 'image') => {
+    if (!file) return false
+
+    // 如果 accept 是数组，转换为字符串处理
+    const acceptType = Array.isArray(accept) ? accept.join(',') : accept
+
+    // 获取文件类型
+    const fileType = getFileType(file)
+
+    // 处理 accept 字符串
+    const acceptTypes = acceptType.split(',').map(type => type.trim())
+
+    // 特殊类型处理
+    if (acceptTypes.includes('all')) return true
+    if (acceptTypes.includes('*')) return true
+
+    // 检查文件类型
+    for (const accepted of acceptTypes) {
+        // 精确匹配
+        if (accepted === fileType) return true
+
+        // MIME 类型匹配
+        if (file.type && accepted.includes('/')) {
+            if (file.type.includes(accepted)) return true
+        }
+
+        // 扩展名匹配
+        const extension = (file.path || file.name || '').split('.').pop().toLowerCase()
+        if (accepted.startsWith('.') && `.${extension}` === accepted) {
+            return true
+        }
+
+        // 通用类型匹配
+        const genericTypes = {
+            'image': ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'],
+            'video': ['mp4', 'avi', 'mov', 'wmv'],
+            'audio': ['mp3', 'wav', 'ogg', 'm4a'],
+            'document': ['pdf', 'doc', 'docx', 'xlsx']
+        }
+
+        if (genericTypes[accepted] && genericTypes[accepted].includes(extension)) {
+            return true
+        }
+    }
+
+    return false
+}
+
+/**
+ * 获取平台特定的文件选择配置
+ */
+export const getPlatformFileConfig = (options = {}) => {
+    const { accept = 'image', count = 1 } = options
+
+    // #ifdef MP-WEIXIN
+    if (accept === 'image' || accept.includes('image')) {
+        return {
+            api: 'chooseImage',
+            config: {
+                count,
+                sizeType: ['original', 'compressed'],
+                sourceType: ['album', 'camera']
+            }
+        }
+    } else if (accept === 'video' || accept.includes('video')) {
+        return {
+            api: 'chooseVideo',
+            config: {
+                sourceType: ['album', 'camera'],
+                compressed: true,
+                maxDuration: 60
+            }
+        }
+    } else {
+        return {
+            api: 'chooseMessageFile',
+            config: {
+                count,
+                type: 'file',
+                extension: getWeChatExtensions(accept)
+            }
+        }
+    }
+    // #endif
+
+    // #ifdef H5 || APP-PLUS
+    return {
+        api: 'chooseFile',
+        config: {
+            count,
+            type: mapAcceptTypeToPlatform(accept, 'uni')[0]
+        }
+    }
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    if (accept === 'image' || accept.includes('image')) {
+        return {
+            api: 'chooseImage',
+            config: {
+                count,
+                sizeType: ['original', 'compressed'],
+                sourceType: ['album', 'camera']
+            }
+        }
+    } else {
+        return {
+            api: 'chooseFile',
+            config: {
+                count
+            }
+        }
+    }
+    // #endif
+
+    return null
+}
+
+/**
+ * 获取微信小程序支持的扩展名
+ */
+const getWeChatExtensions = (accept) => {
+    const extensions = []
+
+    if (accept.includes('image')) {
+        extensions.push('.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp')
+    }
+    if (accept.includes('video')) {
+        extensions.push('.mp4', '.avi', '.mov', '.wmv')
+    }
+    if (accept.includes('.pdf')) {
+        extensions.push('.pdf')
+    }
+    if (accept.includes('.doc') || accept.includes('.docx')) {
+        extensions.push('.doc', '.docx')
+    }
+    if (accept.includes('.xls') || accept.includes('.xlsx')) {
+        extensions.push('.xls', '.xlsx')
+    }
+    if (accept.includes('.ppt') || accept.includes('.pptx')) {
+        extensions.push('.ppt', '.pptx')
+    }
+
+    return extensions
+}
+
+// /**
+//  * 统一文件选择方法（整合类型检查）
+//  */
+// export const chooseFile = async (options = {}) => {
+//     const {
+//         accept = 'image',
+//         count = 1,
+//         sizeLimit, // 文件大小限制（字节）
+//         onTypeError, // 类型错误回调
+//         onSizeError // 大小错误回调
+//     } = options
+
+//     const platformConfig = getPlatformFileConfig({ accept, count })
+
+//     return new Promise((resolve, reject) => {
+//         // #ifdef MP-WEIXIN
+//         const wxApi = wx[platformConfig.api]
+//         wxApi({
+//             ...platformConfig.config,
+//             success: (res) => {
+//                 // 统一处理返回结果
+//                 let files = []
+//                 if (platformConfig.api === 'chooseImage') {
+//                     files = res.tempFiles.map(file => ({
+//                         path: file.path,
+//                         size: file.size,
+//                         type: 'image'
+//                     }))
+//                 } else if (platformConfig.api === 'chooseMessageFile') {
+//                     files = res.tempFiles
+//                 }
+
+//                 // 类型检查
+//                 const filteredFiles = files.filter(file =>
+//                     isFileTypeAccepted(file, accept)
+//                 )
+
+//                 // 大小检查
+//                 if (sizeLimit) {
+//                     const oversizedFiles = filteredFiles.filter(file => file.size > sizeLimit)
+//                     if (oversizedFiles.length > 0 && onSizeError) {
+//                         onSizeError(oversizedFiles)
+//                     }
+//                 }
+
+//                 resolve({
+//                     tempFilePaths: filteredFiles.map(f => f.path),
+//                     tempFiles: filteredFiles
+//                 })
+//             },
+//             fail: reject
+//         })
+//         // #endif
+
+//         // #ifdef H5 || APP-PLUS
+//         uni.chooseFile({
+//             ...platformConfig.config,
+//             success: (res) => {
+//                 // 类型检查
+//                 const filteredFiles = res.tempFiles.filter(file =>
+//                     isFileTypeAccepted(file, accept)
+//                 )
+
+//                 if (filteredFiles.length === 0 && onTypeError) {
+//                     onTypeError('没有符合类型的文件')
+//                 }
+
+//                 // 大小检查
+//                 if (sizeLimit) {
+//                     const oversizedFiles = filteredFiles.filter(file => file.size > sizeLimit)
+//                     if (oversizedFiles.length > 0 && onSizeError) {
+//                         onSizeError(oversizedFiles)
+//                     }
+//                 }
+
+//                 resolve({
+//                     tempFilePaths: filteredFiles.map(f => f.path),
+//                     tempFiles: filteredFiles
+//                 })
+//             },
+//             fail: reject
+//         })
+//         // #endif
+//     })
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",

package/types/components/upload.d.ts

@@ -16,7 +16,7 @@ declare interface UploadFile {
     response?: any
     error?: Error
     rawFile?: any
-    file?: File
+    file?: Object
 }
 
 // 上传组件 Props
@@ -65,7 +65,7 @@ declare interface UploadProps {
     withCredentials?: boolean
     timeout?: number
     autoUpload?: boolean
-    beforeUpload?: (file: File) => boolean | Promise<boolean> // // 上传前钩子
+    beforeUpload?: (file: Object) => boolean | Promise<boolean> // // 上传前钩子
 
     // 响应格式化
     responseFormatter?: (response: any) => { url: string;[key: string]: any }
@@ -81,13 +81,13 @@ declare interface UploadProps {
     readonly?: boolean
 
     // 自定义上传
-    customRequest?: (file: File, onProgress: (percent: number) => void) => Promise<any>
+    customRequest?: (file: Object, onProgress: (percent: number) => void) => Promise<any>
 }
 
 // 上传组件方法
 declare interface UploadMethods {
     // 手动上传文件
-    upload: (file: File) => Promise<void>
+    upload: (file: Object) => Promise<void>
 
     // 清空文件列表
     clearFiles: () => void
@@ -109,14 +109,14 @@ declare interface _Upload {
         $emit: {
             'update:modelValue': (files: UploadFile[]) => void
             'change': (files: UploadFile[]) => void
-            'select': (file: File) => void
+            'select': (file: Object) => void
             'upload': (file: UploadFile) => void
             'success': (response: any, file: UploadFile) => void
             'error': (error: Error, file: UploadFile) => void
             'progress': (percent: number, file: UploadFile) => void
             'remove': (file: UploadFile, index: number) => void
             'preview': (file: UploadFile) => void
-            'exceed': (files: File[]) => void
+            'exceed': (files: Object[]) => void
             'before-upload': (file: UploadFile) => void
             'after-upload': (file: UploadFile) => void
         }