im-ui-mobile 0.1.15 → 0.1.16

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

@@ -155,6 +155,7 @@ 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'
+import { universalUploadFile } from './utils/upload'
 
 // 定义文件类型
 interface UploadFile {
@@ -621,59 +622,51 @@ const defaultUpload = (uploadFile: UploadFile): Promise<any> => {
     'AccessToken': props.accessToken,
   }
 
-  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,
-      // onProgressUpdate: (res: any) => {
-      //   console.log('res.progress',res.progress)
-      //   uploadFile.progress = res.progress
-      //   emit('progress', res.progress, uploadFile)
-      //   updateFileList()
-      // },
-      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)
-      }
-    })
-
-    // // 监听上传进度
-    // 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)
-    // }).catch(() => {
-    //   uploadTasks.delete(uploadFile.uid)
-    // })
+  return universalUploadFile({
+    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
   })
+
+  // 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)
+  //     }
+  //   })
+  // })
 }
 
 // 更新文件列表

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

@@ -0,0 +1,227 @@
+// utils/upload.js
+/**
+ * 获取平台特定的上传方法
+ */
+const getPlatformUploadAPI = () => {
+    // #ifdef H5 || APP-PLUS
+    return uni.uploadFile
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    return wx.uploadFile
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    return my.uploadFile || my.httpRequest
+    // #endif
+
+    // #ifdef MP-BAIDU
+    return swan.uploadFile
+    // #endif
+
+    // #ifdef MP-TOUTIAO
+    return tt.uploadFile
+    // #endif
+
+    // #ifdef MP-KUAISHOU
+    return ks.uploadFile
+    // #endif
+
+    // 默认返回 uni.uploadFile
+    return uni.uploadFile
+}
+
+/**
+ * 获取平台特定的请求头处理
+ */
+const getPlatformHeaders = (headers, platform) => {
+    // 微信小程序需要特殊处理
+    if (platform === 'wx') {
+        // 微信小程序中，header 字段名是小写的
+        const wxHeaders = {}
+        Object.keys(headers).forEach(key => {
+            wxHeaders[key.toLowerCase()] = headers[key]
+        })
+        return wxHeaders
+    }
+
+    return headers
+}
+
+/**
+ * 获取平台特定的请求配置
+ */
+const getPlatformConfig = (config, platform) => {
+    const baseConfig = {
+        url: config.url,
+        filePath: config.filePath,
+        name: config.name || 'file',
+        formData: config.formData || {},
+        timeout: config.timeout || 60000,
+        complete: config.complete,
+        success: config.success,
+        fail: config.fail
+    }
+
+    // 平台特定的配置调整
+    switch (platform) {
+        case 'wx':
+            // 微信小程序
+            return {
+                ...baseConfig,
+                header: getPlatformHeaders(config.header || {}, 'wx')
+            }
+
+        case 'alipay':
+            // 支付宝小程序
+            return {
+                ...baseConfig,
+                headers: config.header || {}, // 支付宝使用 headers
+                fileType: 'image' // 支付宝可能需要指定文件类型
+            }
+
+        case 'baidu':
+            // 百度小程序
+            return {
+                ...baseConfig,
+                header: config.header || {}
+            }
+
+        case 'tt':
+            // 字节跳动小程序
+            return {
+                ...baseConfig,
+                header: config.header || {}
+            }
+
+        default:
+            // uni-app 和其他平台
+            return {
+                ...baseConfig,
+                header: config.header || {},
+                withCredentials: config.withCredentials || false
+            }
+    }
+}
+
+/**
+ * 获取当前平台标识
+ */
+const getCurrentPlatform = () => {
+    // #ifdef MP-WEIXIN
+    return 'wx'
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    return 'alipay'
+    // #endif
+
+    // #ifdef MP-BAIDU
+    return 'baidu'
+    // #endif
+
+    // #ifdef MP-TOUTIAO
+    return 'tt'
+    // #endif
+
+    // #ifdef MP-KUAISHOU
+    return 'ks'
+    // #endif
+
+    // #ifdef H5
+    return 'h5'
+    // #endif
+
+    // #ifdef APP-PLUS
+    return 'app'
+    // #endif
+
+    return 'uni'
+}
+
+/**
+ * 多平台兼容的文件上传方法
+ */
+export const universalUploadFile = (config) => {
+    const platform = getCurrentPlatform()
+    const platformConfig = getPlatformConfig(config, platform)
+    const uploadAPI = getPlatformUploadAPI()
+
+    return new Promise((resolve, reject) => {
+        // 平台特定的成功回调处理
+        const successCallback = (res) => {
+            try {
+                // 统一处理返回数据格式
+                let data = res.data || res
+
+                if (typeof data === 'string') {
+                    try {
+                        data = JSON.parse(data)
+                    } catch (e) {
+                        // 如果不是 JSON，保持原样
+                    }
+                }
+
+                // 构建统一的响应格式
+                const unifiedResponse = {
+                    statusCode: res.statusCode || 200,
+                    data,
+                    errMsg: res.errMsg || 'uploadFile:ok'
+                }
+
+                // 调用原始 success 回调
+                if (config.success) {
+                    config.success(unifiedResponse)
+                }
+
+                resolve(unifiedResponse)
+            } catch (error) {
+                reject(error)
+            }
+        }
+
+        // 平台特定的失败回调处理
+        const failCallback = (err) => {
+            const error = {
+                errMsg: err.errMsg || 'uploadFile:fail',
+                detail: err
+            }
+
+            if (config.fail) {
+                config.fail(error)
+            }
+
+            reject(error)
+        }
+
+        // 执行上传
+        try {
+            if (platform === 'alipay' && my.uploadFile) {
+                // 支付宝小程序特殊处理
+                my.uploadFile({
+                    url: platformConfig.url,
+                    fileType: 'image',
+                    fileName: 'file',
+                    filePath: platformConfig.filePath,
+                    formData: platformConfig.formData,
+                    headers: platformConfig.headers,
+                    success: successCallback,
+                    fail: failCallback,
+                    complete: platformConfig.complete
+                })
+            } else {
+                // 其他平台
+                uploadAPI({
+                    ...platformConfig,
+                    success: successCallback,
+                    fail: failCallback
+                })
+            }
+        } catch (error) {
+            reject({
+                errMsg: 'uploadFile:fail',
+                detail: error
+            })
+        }
+    })
+}

package/package.json

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