chore(Upload): compatible with WxWork and PC (#4087)

anlyyao · web-flow · commit b3a2e8a0a9e4 · 2025-12-01T15:41:45.000+08:00
* chore(Upload): compatible with WxWork and PC

* fix(Avatar): fix ts error

* fix(Upload): when request-method returns Promise, uploading cannot be done
diff --git a/packages/components/avatar/avatar.ts b/packages/components/avatar/avatar.ts
@@ -27,7 +27,7 @@ export default class Avatar extends SuperComponent {
     classPrefix: name,
     isShow: true,
     zIndex: 0,
-    systemInfo,
+    windowWidth: systemInfo.windowWidth,
   };
 
   relations: RelationsOptions = {
diff --git a/packages/components/avatar/avatar.wxml b/packages/components/avatar/avatar.wxml
@@ -22,7 +22,7 @@
   >
     <view
       class="{{_this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image"
-      style="{{_this.getSize(size, systemInfo)}}"
+      style="{{_this.getSize(size, windowWidth)}}"
       aria-label="{{ ariaLabel || alt ||'头像'}}"
       aria-role="{{ ariaRole || 'img'}}"
       aria-hidden="{{ ariaHidden }}"
diff --git a/packages/components/avatar/avatar.wxs b/packages/components/avatar/avatar.wxs
@@ -11,13 +11,13 @@ module.exports = {
     return classNames.join(' ');
   },
 
-  getSize: function (size = 'medium', systemInfo) {
+  getSize: function (size = 'medium', windowWidth) {
     var res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
 
     if (res && res.length >= 3) {
       var px = res[1];
       if (res[2] === 'rpx') {
-        px = Math.floor((systemInfo.windowWidth * res[1]) / 750);
+        px = Math.floor((windowWidth * res[1]) / 750);
       }
 
       return 'width:' + size + ';height:' + size + ';font-size:' + ((px / 8) * 3 + 2) + 'px';
diff --git a/packages/components/common/utils.ts b/packages/components/common/utils.ts
@@ -2,11 +2,16 @@ import { prefix } from './config';
 import { isString, isNumber, isDef, isBoolean, isObject } from './validator';
 import { getWindowInfo, getAppBaseInfo, getDeviceInfo } from './wechat';
 
-export const systemInfo: WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo = getWindowInfo();
+interface WxWorkSystemInfo extends WechatMiniprogram.SystemInfo {
+  environment?: 'wxwork';
+}
+interface SystemInfo extends WxWorkSystemInfo {}
+
+export const systemInfo: WechatMiniprogram.WindowInfo | SystemInfo = getWindowInfo();
 
-export const appBaseInfo: WechatMiniprogram.AppBaseInfo | WechatMiniprogram.SystemInfo = getAppBaseInfo();
+export const appBaseInfo: WechatMiniprogram.AppBaseInfo | SystemInfo = getAppBaseInfo();
 
-export const deviceInfo: WechatMiniprogram.DeviceInfo | WechatMiniprogram.SystemInfo = getDeviceInfo();
+export const deviceInfo: WechatMiniprogram.DeviceInfo | SystemInfo = getDeviceInfo();
 
 type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
 
@@ -133,6 +138,15 @@ export const isIOS = function (): boolean {
   return !!(deviceInfo?.system?.toLowerCase().search('ios') + 1);
 };
 
+/**
+ * 判断是否是为企微环境
+ * 企微环境 wx.getSystemInfoSync() 接口会额外返回 environment 字段（微信中不返回）
+ * https://developer.work.weixin.qq.com/document/path/91511
+ */
+export const isWxWork = (deviceInfo as SystemInfo)?.environment === 'wxwork';
+
+export const isPC = ['mac', 'windows'].includes(deviceInfo?.platform);
+
 export const addUnit = function (value?: string | number): string | undefined {
   if (!isDef(value)) {
     return undefined;
diff --git a/packages/components/upload/upload.ts b/packages/components/upload/upload.ts
@@ -1,8 +1,8 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import props from './props';
-import { UploadFile } from './type';
+import { UploadFile, SizeLimitObj } from './type';
 import config from '../common/config';
-import { isOverSize } from '../common/utils';
+import { isOverSize, isWxWork, isPC } from '../common/utils';
 import { isObject } from '../common/validator';
 
 const { prefix } = config;
@@ -111,6 +111,20 @@ export default class Upload extends SuperComponent {
     return parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName;
   }
 
+  checkFileSize(size: number, sizeLimit: SizeLimitObj | number, fileType?: string): boolean {
+    if (isOverSize(size, sizeLimit)) {
+      let title = `${fileType === 'video' ? '视频' : '图片'}大小超过限制`;
+
+      if (isObject(sizeLimit)) {
+        const { size: limitSize, message: limitMessage } = sizeLimit as SizeLimitObj;
+        title = limitMessage?.replace('{sizeLimit}', String(limitSize));
+      }
+      wx.showToast({ icon: 'none', title });
+      return true;
+    }
+    return false;
+  }
+
   onDelete(e: any) {
     const { index } = e.currentTarget.dataset;
     this.deleteHandle(index);
@@ -278,13 +292,13 @@ export default class Upload extends SuperComponent {
     },
 
     uploadFiles(files: UploadFile[]) {
-      return new Promise((resolve) => {
+      return Promise.resolve().then(() => {
         // 开始调用上传函数
         const task = this.data.requestMethod(files);
         if (task instanceof Promise) {
           return task;
         }
-        resolve({});
+        return Promise.resolve({});
       });
     },
 
@@ -323,50 +337,77 @@ export default class Upload extends SuperComponent {
     chooseMedia(mediaType) {
       const { customLimit } = this.data;
       const { config, sizeLimit } = this.properties;
-      wx.chooseMedia({
-        count: Math.min(20, customLimit),
-        mediaType,
-        ...config,
-        success: (res) => {
-          const files = [];
-
-          // 支持单/多文件
-          res.tempFiles.forEach((temp) => {
-            const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp;
-
-            if (isOverSize(size, sizeLimit)) {
-              let title = `${fileType === 'image' ? '图片' : '视频'}大小超过限制`;
 
-              if (typeof sizeLimit !== 'number') {
-                title = sizeLimit.message.replace('{sizeLimit}', sizeLimit?.size);
-              }
-              wx.showToast({ icon: 'none', title });
-              return;
-            }
+      if (isWxWork || isPC) {
+        wx.chooseImage({
+          count: Math.min(20, customLimit),
+          ...config,
+          success: (res) => {
+            const files = [];
+
+            res.tempFiles.forEach((temp) => {
+              const { path, size } = temp;
+
+              if (this.checkFileSize(size, sizeLimit, 'image')) return;
+
+              const name = this.getRandFileName(path);
+              files.push({
+                name,
+                type: 'image',
+                url: path,
+                size: size,
+                percent: 0,
+              });
+            });
 
-            const name = this.getRandFileName(tempFilePath);
-            files.push({
-              name,
-              type: this.getFileType(mediaType, tempFilePath, fileType),
-              url: tempFilePath,
-              size: size,
-              width: width,
-              height: height,
-              duration: duration,
-              thumb: thumbTempFilePath,
-              percent: 0,
-              ...res,
+            this.afterSelect(files);
+          },
+          fail: (err) => {
+            this.triggerFailEvent(err);
+          },
+          complete: (res) => {
+            this.triggerEvent('complete', res);
+          },
+        });
+      } else {
+        wx.chooseMedia({
+          count: Math.min(20, customLimit),
+          mediaType,
+          ...config,
+          success: (res) => {
+            const files = [];
+
+            // 支持单/多文件
+            res.tempFiles.forEach((temp) => {
+              const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp;
+
+              if (this.checkFileSize(size, sizeLimit, fileType)) return;
+
+              const name = this.getRandFileName(tempFilePath);
+              files.push({
+                name,
+                type: this.getFileType(mediaType, tempFilePath, fileType),
+                url: tempFilePath,
+                size: size,
+                width: width,
+                height: height,
+                duration: duration,
+                thumb: thumbTempFilePath,
+                percent: 0,
+                ...res,
+              });
             });
-          });
-          this.afterSelect(files);
-        },
-        fail: (err) => {
-          this.triggerFailEvent(err);
-        },
-        complete: (res) => {
-          this.triggerEvent('complete', res);
-        },
-      });
+
+            this.afterSelect(files);
+          },
+          fail: (err) => {
+            this.triggerFailEvent(err);
+          },
+          complete: (res) => {
+            this.triggerEvent('complete', res);
+          },
+        });
+      }
     },
 
     chooseMessageFile(mediaType) {
@@ -383,15 +424,7 @@ export default class Upload extends SuperComponent {
           res.tempFiles.forEach((temp) => {
             const { size, type: fileType, path: tempFilePath, ...res } = temp;
 
-            if (isOverSize(size, sizeLimit)) {
-              let title = `${fileType === 'image' ? '图片' : '视频'}大小超过限制`;
-
-              if (typeof sizeLimit !== 'number') {
-                title = sizeLimit.message.replace('{sizeLimit}', sizeLimit?.size);
-              }
-              wx.showToast({ icon: 'none', title });
-              return;
-            }
+            if (this.checkFileSize(size, sizeLimit, fileType)) return;
 
             const name = this.getRandFileName(tempFilePath);
             files.push({

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`>`
`23`	`23`	`<view`
`24`	`24`	`class="{{_this.getClass(classPrefix, size \|\| 'medium', shape, bordered)}} {{prefix}}-class-image"`
`25`		`- style="{{_this.getSize(size, systemInfo)}}"`
	`25`	`+ style="{{_this.getSize(size, windowWidth)}}"`
`26`	`26`	`aria-label="{{ ariaLabel \|\| alt \|\|'头像'}}"`
`27`	`27`	`aria-role="{{ ariaRole \|\| 'img'}}"`
`28`	`28`	`aria-hidden="{{ ariaHidden }}"`