@hzab/form-render-mobile 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {

package/src/common/location-utils.ts

@@ -1,6 +1,9 @@
 declare global {
   interface Window {
     resolveLocalFileSystemURL?: (url: string, successCallback: (entry: any) => void, errorCallback?: (error: any) => void) => void;
+    chooser?:{
+      getFile: any
+    }
   }
 
   interface Navigator {
@@ -11,6 +14,7 @@ declare global {
   }
 }
 
+
 interface IGalleryUopload {
   options?: Partial<{
     quality: number;
@@ -89,13 +93,9 @@ export function onGalleryUopload(opt?: IGalleryUopload) {
                 if (reader.result) {
                   const imgBlob: any = new Blob([reader.result], { type: "image/jpeg" });
 
-                  if (!imgBlob?.name) imgBlob.name = `${Date.now()}.${imgBlob.type?.replace("image/", "")}`;
-
-                  if (!imgBlob?.lastModifiedDate) imgBlob.lastModifiedDate = new Date();
-
-                  if (!imgBlob?.lastModified) imgBlob.lastModified = imgBlob.lastModifiedDate.getTime();
+                  const _blob = addBlobAttributeUtil(imgBlob)
 
-                  onUploadSuccess?.(imgBlob);
+                  onUploadSuccess?.(_blob);
                 }
               };
               reader.readAsArrayBuffer(file);
@@ -122,3 +122,133 @@ export function onGalleryUopload(opt?: IGalleryUopload) {
     onUploadError?.(error);
   }
 }
+
+interface ChooseUpload {
+  quality: number;
+  // 选择返回值的格式。通常有2个枚举：DATA_URL 0 或者 FILE_URI 1
+  destinationType: number;
+  // 图片来源类型: 0 照片库，1 相机， 2 已保存相册
+  sourceType: number;
+  encodingType: string;
+  mediaType: string;
+  allowEdit: boolean;
+  correctOrientation: boolean;
+}
+
+interface IChooserOptions {
+  mimeTypes?: string[];
+  // maxFileSize?: number
+}
+
+// 异常类型
+export enum ErrorCallbackEnum {
+  // 文件超出指定大小
+  SIZE_EXCEED_ERROR = 1,
+
+  // 文件类型错误
+  FILE_TYPE_ERROR = 2
+}
+
+type ExclusiveOptions = ChooseUpload & IChooserOptions;
+
+interface IUploadOptions {
+  additionalParams?: ExclusiveOptions;
+  errorCallback?: (type?: ErrorCallbackEnum) => void;
+  onSuccess?: (values: { blob: Blob, fileType: string }) => void;
+  onError?: (error: Error) => void;
+}
+
+
+interface IUploader {
+  upload(options: IUploadOptions): void;
+}
+
+/**
+ * 基础类
+ */
+export default class UploadManager {
+  private uploader: IUploader;
+
+  defaultAccept: string[] = ["image/jpg", "image/jpeg", "image/png", "image/gif"];
+  // 单位MB
+  // maxFileSize: number = 1024000
+
+  constructor(uploader: IUploader) {
+    this.uploader = uploader;
+  }
+
+  addAccept(accepts: string[]) {
+    this.defaultAccept = [...this.defaultAccept, ...accepts]
+  }
+
+  // 切换插件
+  protected setUploader(uploader: IUploader) {
+    this.uploader = uploader;
+  }
+
+  uploadFile(options: IUploadOptions) {
+    this.uploader.upload(options);
+  }
+}
+
+const addBlobAttributeUtil = (blob: Blob | any) => {
+  const _blob = blob;
+  if (!blob?.name && blob.type.indexOf("image/") > 0) {
+    blob.name = `${Date.now()}.${blob.type?.replace("image/", "")}`;
+  }
+
+  if (!_blob?.lastModifiedDate) _blob.lastModifiedDate = new Date();
+
+  if (!_blob?.lastModified) _blob.lastModified = _blob.lastModifiedDate.getTime();
+
+  return _blob
+}
+
+
+
+/**
+ * 通过cordova-plugin-chooser上传文件
+ * 文档：https://github.com/MaximBelov/cordova-plugin-chooser
+ */
+export class ChooserUploader extends UploadManager implements IUploader {
+
+  async upload(options: IUploadOptions) {
+    try {
+      const { mimeTypes} = options?.additionalParams || {}
+      const mergeAccepts = [...this.defaultAccept, ...(mimeTypes || [])]
+      // const maxFileSize = _maxFileSize || this.maxFileSize;
+
+      const fileObj: { path: string; mimeType: string; size: number; name: string } = await window.chooser.getFile({ mimeTypes: mergeAccepts.join(",") });
+      const { path, size, mimeType } = fileObj || {}
+
+      console.log("file", fileObj.mimeType, fileObj?.size)
+
+      // 不属于指定类型
+      if (!mergeAccepts.includes(fileObj.mimeType)) {
+        options?.errorCallback?.(ErrorCallbackEnum.FILE_TYPE_ERROR)
+        return
+        // 超出文件最大限制
+      } 
+      // else if (size > maxFileSize) {
+      //   options?.errorCallback?.(ErrorCallbackEnum.SIZE_EXCEED_ERROR)
+      //   return
+      // } 
+      else {
+        window.resolveLocalFileSystemURL(path, (fileEntry: any) => {
+          fileEntry.file((file: File) => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+              const blob: any = new Blob([reader.result as ArrayBuffer], { type: mimeType });
+              const _blob = addBlobAttributeUtil(blob)
+
+              options.onSuccess?.({ blob: _blob, fileType: mimeType });
+            };
+            reader.readAsArrayBuffer(file);
+          }, (err: any) => options.onError?.(err));
+        }, (err: any) => options.onError?.(err));
+      }
+    } catch (error) {
+      console.error("chooser：", error);
+    }
+  }
+}

package/src/components/Uploader/uploader.jsx

@@ -7,7 +7,7 @@ import ItemList from "./components/ItemList";
 import { getImage, getVideo, getAudio } from "./common/cordova-camera";
 import { handleMaxCount, handleInputFileList } from "./common/utils";
 import { handleOssUpload } from "./common/ossUpload";
-import { onGalleryUopload } from "../../common/location-utils";
+import uploadManager, { ChooserUploader, onGalleryUopload } from "../../common/location-utils";
 
 import "./uploader.less";
 
@@ -39,12 +39,14 @@ function Uploader(props, ref) {
     onCountExceed,
     headers,
     uploadBtnNode,
-    // 是否使用cordova-plugin-camera插件上传文件
-    enableCordovaPluginCamera = true,
+    // cordova插件上传类型  cordova-plugin-chooser | cordova-plugin-camera
+    cordovaPlugin = 'cordova-plugin-chooser'
   } = props;
   const [loading, setLoading] = useState(false);
   const [fileList, setFileList] = useState(handleInputFileList(value, maxCount));
   const [actionSheetVisible, setActionSheetVisible] = useState(false);
+  const uploadManagerRef = useRef(new uploadManager(new ChooserUploader()));
+
   useEffect(() => {
     setFileList(handleInputFileList(value, maxCount));
   }, [value]);
@@ -136,7 +138,7 @@ function Uploader(props, ref) {
   function onPicker({ key }) {
     switch (key) {
       case "select":
-        if (navigator?.camera && enableCordovaPluginCamera) {
+        if (navigator?.camera && cordovaPlugin === 'cordova-plugin-camera') {
           onGalleryUopload?.({
             onUploadSuccess: (res) => {
               onFileChange({
@@ -148,6 +150,26 @@ function Uploader(props, ref) {
               });
             },
           });
+        } else if (window?.chooser && cordovaPlugin === 'cordova-plugin-chooser') {
+          uploadManagerRef.current.uploadFile({
+            errorCallback(type) {
+              if (type === 2) {
+                Toast.show("文件类型错误，请重新选择");
+              }
+            },
+            onSuccess(values) {
+              onFileChange({
+                persist: () => {},
+                target: {
+                  value: "",
+                  files: [values.blob],
+                },
+              });
+            },
+            onError(error) {
+              console.log("文件选择失败：", error);
+            },
+          });
         } else {
           uploaderRef.current.click();
         }