@hzab/form-render-mobile 1.2.0 → 1.2.1-beta1

package/src/components/Uploader/uploader.jsx

@@ -1,287 +1,295 @@
-import { useState, useRef, useEffect, useMemo, useImperativeHandle, forwardRef } from "react";
-import { Button, Dialog, ActionSheet, Toast } from "antd-mobile";
-import { nanoid } from "nanoid";
-
-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 uploadManager, { ChooserUploader, onGalleryUopload } from "../../common/location-utils";
-
-import "./uploader.less";
-
-const _ = require("lodash");
-
-function Uploader(props, ref) {
-  const {
-    name,
-    multiple,
-    // 模式字符串: all | select | image | video 或 数组 select | image | video 组合：如：['select', 'image']
-    mode = "select",
-    onChange,
-    accept,
-    disabled,
-    readOnly,
-    value,
-    baseUrl = "",
-    // 文件大小限制
-    maxSize,
-    maxCount = 1,
-    // 是否使用 oss 上传文件
-    isOssUpload,
-    // 是否使用字符串结果
-    isStrRes,
-    // maxCount === 1 时，结果是否自动去除数组嵌套
-    isResRemoveArr = true,
-    ossUrl,
-    ossOpt,
-    onCountExceed,
-    headers,
-    uploadBtnNode,
-    // cordova插件上传类型  cordova-plugin-chooser | cordova-plugin-camera
-    cordovaPlugin = "cordova-plugin-camera",
-    uploaderProps
-  } = 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]);
-
-  useImperativeHandle(ref, () => ({ onPicker, setActionSheetVisible }));
-
-  async function onFileChange(e) {
-    e.persist();
-    const { files: rawFiles } = e.target;
-    let files = [...fileList, ...[].slice.call(rawFiles)];
-    // 超出个数限制只保留前面的 maxCount 个
-    if (maxCount > 0 && files.length > maxCount) {
-      onCountExceed && onCountExceed(files.length - maxCount);
-      files.length = maxCount;
-      Toast.show({
-        icon: "fail",
-        content: "文件个数超出限制",
-      });
-    }
-    files = files.filter((it) => {
-      if (!it.uid) {
-        it.uid = nanoid();
-      }
-      if (maxSize && it.size > maxSize) {
-        Toast.show({
-          icon: "fail",
-          content: "文件大小超出限制：" + it.size,
-        });
-        return false;
-      }
-      return it;
-    });
-    // 处理 oss 逻辑
-    if (isOssUpload) {
-      setLoading(true);
-      files = await handleOssUpload(files, {
-        axios: props.axios,
-        axiosConf: props?.axiosConf,
-        ...ossOpt,
-        ossUrl,
-      });
-      setLoading(false);
-    }
-
-    e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
-    handleChange(files);
-  }
-
-  function handleChange(files, optType) {
-    let _files = files;
-    if (optType !== "del" && maxCount > 1) {
-      _files = [...fileList, ..._files];
-    }
-    _files = handleMaxCount(files, maxCount);
-    setFileList(_files);
-    if (isOssUpload && isStrRes) {
-      _files = _files?.map((file) => {
-        return file.url || file.ossUrl;
-      });
-    }
-    if (!_files || _files.length <= 0) {
-      _files = undefined;
-    } else if (isResRemoveArr && maxCount === 1) {
-      // maxCount 为1的时候返回结果去除数组
-      _files = _files[0];
-    }
-    onChange && onChange(_files);
-  }
-
-  const uploaderRef = useRef();
-  const audioUploaderRef = useRef();
-
-  const actions = useMemo(() => {
-    const allEnum = {
-      select: { text: "选择文件", key: "select" },
-      image: { text: "拍照", key: "captureImage" },
-      video: { text: "录像", key: "captureVideo" },
-      audio: { text: "录音", key: "captureAudio" },
-    };
-    if (Array.isArray(mode)) {
-      return mode.filter((it) => !!allEnum[it]).map((it) => allEnum[it]);
-    }
-    if (mode === "all") {
-      return Object.keys(allEnum).map((key) => allEnum[key]);
-    }
-    return allEnum[mode] ? [allEnum[mode]] : [allEnum.select];
-  }, [mode]);
-
-  function onPicker({ key }) {
-    switch (key) {
-      case "select":
-        if (navigator?.camera && cordovaPlugin === "cordova-plugin-camera") {
-          onGalleryUopload?.({
-            onUploadSuccess: (res) => {
-              onFileChange({
-                persist: () => { },
-                target: {
-                  value: "",
-                  files: [res],
-                },
-              });
-            },
-            options: {
-              cameraDirection: uploaderProps?.CameraConf?.frontCamera ? Camera.Direction.FRONT : null,
-              ...uploaderProps?.CameraConf
-            }
-          });
-        } 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();
-        }
-        break;
-
-      case "captureImage":
-        getImage(props.imgPluginOpt, props.getImgOpt).then((res) => {
-          onFileChange({
-            persist: () => { },
-            target: {
-              value: "",
-              files: [res],
-            },
-          });
-        });
-        break;
-
-      case "captureVideo":
-        getVideo().then((res) => {
-          onFileChange({
-            persist: () => { },
-            target: {
-              value: "",
-              files: [res],
-            },
-          });
-        });
-        break;
-
-      case "captureAudio":
-        audioUploaderRef.current.click();
-        // TODO: reader 报错
-        // getAudio().then((res) => {
-        //   onFileChange({
-        //     persist: () => {},
-        //     target: {
-        //       value: "",
-        //       files: [res],
-        //     },
-        //   });
-        // });
-        break;
-    }
-    setActionSheetVisible(false);
-  }
-
-  function onItemDel(idx) {
-    Dialog.confirm({
-      content: "确认删除？",
-      onConfirm: () => {
-        const middleValue = _.cloneDeep(fileList);
-        middleValue.splice(idx, 1);
-        handleChange(middleValue, "del");
-        setFileList(middleValue);
-      },
-    });
-  }
-
-  const inputProps = {
-    className: "aria-hidden",
-    style: { display: "none" },
-    id: name,
-    onChange: onFileChange,
-    type: "file",
-    name: name,
-    multiple: multiple,
-    accept: accept,
-    capture: props.capture,
-  };
-
-  return (
-    <div className="uploader">
-      <input {...inputProps} ref={uploaderRef}></input>
-      <input {...inputProps} ref={audioUploaderRef} id={name + "-audio"} accept="audio/*"></input>
-      <ItemList
-        fileList={fileList}
-        baseUrl={isOssUpload ? baseUrl : ""}
-        disabled={disabled}
-        readOnly={readOnly}
-        onItemDel={onItemDel}
-        headers={headers}
-      />
-      {disabled || readOnly || (maxCount > 0 && fileList.length >= maxCount) ? null : (
-        <>
-          <div
-            className={`uploader-add-btn ${loading ? "uploader-add-btn-loading" : ""}`}
-            onClick={() => {
-              if (loading) {
-                return;
-              }
-              setActionSheetVisible(true);
-            }}
-            loading={loading}
-          >
-            {loading ? "上传中..." : uploadBtnNode ? uploadBtnNode : "+"}
-          </div>
-          <ActionSheet
-            cancelText="取消"
-            visible={actionSheetVisible}
-            actions={actions}
-            onAction={onPicker}
-            onClose={() => setActionSheetVisible(false)}
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-export default forwardRef(Uploader);
+import { useState, useRef, useEffect, useMemo, useImperativeHandle, forwardRef } from "react";
+import { Button, Dialog, ActionSheet, Toast } from "antd-mobile";
+import { nanoid } from "nanoid";
+
+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 uploadManager, { ChooserUploader, onGalleryUopload } from "../../common/location-utils";
+
+import "./uploader.less";
+
+const _ = require("lodash");
+
+function Uploader(props, ref) {
+  const {
+    name,
+    multiple,
+    // 模式字符串: all | select | image | video 或 数组 select | image | video 组合：如：['select', 'image']
+    mode = "select",
+    onChange,
+    accept,
+    disabled,
+    readOnly,
+    value,
+    baseUrl = "",
+    // 文件大小限制
+    maxSize,
+    maxCount = 1,
+    // 是否使用 oss 上传文件
+    isOssUpload,
+    // 是否使用字符串结果
+    isStrRes,
+    // maxCount === 1 时，结果是否自动去除数组嵌套
+    isResRemoveArr = true,
+    ossUrl,
+    ossOpt,
+    onCountExceed,
+    headers,
+    uploadBtnNode,
+    // cordova插件上传类型  cordova-plugin-chooser | cordova-plugin-camera
+    cordovaPlugin = "cordova-plugin-camera",
+    uploaderProps,
+    thumbnailParams = "x-oss-process=image/resize,w_100"
+  } = props;
+  const [loading, setLoading] = useState(false);
+  const [fileList, setFileList] = useState(handleInputFileList(value, maxCount, {
+    thumbnailParams,
+    ossOpt
+  }));
+  const [actionSheetVisible, setActionSheetVisible] = useState(false);
+  const uploadManagerRef = useRef(new uploadManager(new ChooserUploader()));
+
+  useEffect(() => {
+    setFileList(handleInputFileList(value, maxCount, {
+      thumbnailParams,
+      ossOpt
+    }));
+  }, [value, thumbnailParams, ossOpt]);
+
+  useImperativeHandle(ref, () => ({ onPicker, setActionSheetVisible }));
+
+  async function onFileChange(e) {
+    e.persist();
+    const { files: rawFiles } = e.target;
+    let files = [...fileList, ...[].slice.call(rawFiles)];
+    // 超出个数限制只保留前面的 maxCount 个
+    if (maxCount > 0 && files.length > maxCount) {
+      onCountExceed && onCountExceed(files.length - maxCount);
+      files.length = maxCount;
+      Toast.show({
+        icon: "fail",
+        content: "文件个数超出限制",
+      });
+    }
+    files = files.filter((it) => {
+      if (!it.uid) {
+        it.uid = nanoid();
+      }
+      if (maxSize && it.size > maxSize) {
+        Toast.show({
+          icon: "fail",
+          content: "文件大小超出限制：" + it.size,
+        });
+        return false;
+      }
+      return it;
+    });
+    // 处理 oss 逻辑
+    if (isOssUpload) {
+      setLoading(true);
+      files = await handleOssUpload(files, {
+        axios: props.axios,
+        axiosConf: props?.axiosConf,
+        ...ossOpt,
+        ossUrl,
+        thumbnailParams
+      });
+      setLoading(false);
+    }
+
+    e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
+    handleChange(files);
+  }
+
+  function handleChange(files, optType) {
+    let _files = files;
+    if (optType !== "del" && maxCount > 1) {
+      _files = [...fileList, ..._files];
+    }
+    _files = handleMaxCount(files, maxCount);
+    setFileList(_files);
+    if (isOssUpload && isStrRes) {
+      _files = _files?.map((file) => {
+        return file.url || file.ossUrl;
+      });
+    }
+    if (!_files || _files.length <= 0) {
+      _files = undefined;
+    } else if (isResRemoveArr && maxCount === 1) {
+      // maxCount 为1的时候返回结果去除数组
+      _files = _files[0];
+    }
+    onChange && onChange(_files);
+  }
+
+  const uploaderRef = useRef();
+  const audioUploaderRef = useRef();
+
+  const actions = useMemo(() => {
+    const allEnum = {
+      select: { text: "选择文件", key: "select" },
+      image: { text: "拍照", key: "captureImage" },
+      video: { text: "录像", key: "captureVideo" },
+      audio: { text: "录音", key: "captureAudio" },
+    };
+    if (Array.isArray(mode)) {
+      return mode.filter((it) => !!allEnum[it]).map((it) => allEnum[it]);
+    }
+    if (mode === "all") {
+      return Object.keys(allEnum).map((key) => allEnum[key]);
+    }
+    return allEnum[mode] ? [allEnum[mode]] : [allEnum.select];
+  }, [mode]);
+
+  function onPicker({ key }) {
+    switch (key) {
+      case "select":
+        if (navigator?.camera && cordovaPlugin === "cordova-plugin-camera") {
+          onGalleryUopload?.({
+            onUploadSuccess: (res) => {
+              onFileChange({
+                persist: () => { },
+                target: {
+                  value: "",
+                  files: [res],
+                },
+              });
+            },
+            options: {
+              cameraDirection: uploaderProps?.CameraConf?.frontCamera ? Camera.Direction.FRONT : null,
+              ...uploaderProps?.CameraConf
+            }
+          });
+        } 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();
+        }
+        break;
+
+      case "captureImage":
+        getImage(props.imgPluginOpt, props.getImgOpt).then((res) => {
+          onFileChange({
+            persist: () => { },
+            target: {
+              value: "",
+              files: [res],
+            },
+          });
+        });
+        break;
+
+      case "captureVideo":
+        getVideo().then((res) => {
+          onFileChange({
+            persist: () => { },
+            target: {
+              value: "",
+              files: [res],
+            },
+          });
+        });
+        break;
+
+      case "captureAudio":
+        audioUploaderRef.current.click();
+        // TODO: reader 报错
+        // getAudio().then((res) => {
+        //   onFileChange({
+        //     persist: () => {},
+        //     target: {
+        //       value: "",
+        //       files: [res],
+        //     },
+        //   });
+        // });
+        break;
+    }
+    setActionSheetVisible(false);
+  }
+
+  function onItemDel(idx) {
+    Dialog.confirm({
+      content: "确认删除？",
+      onConfirm: () => {
+        const middleValue = _.cloneDeep(fileList);
+        middleValue.splice(idx, 1);
+        handleChange(middleValue, "del");
+        setFileList(middleValue);
+      },
+    });
+  }
+
+  const inputProps = {
+    className: "aria-hidden",
+    style: { display: "none" },
+    id: name,
+    onChange: onFileChange,
+    type: "file",
+    name: name,
+    multiple: multiple,
+    accept: accept,
+    capture: props.capture,
+  };
+
+  return (
+    <div className="uploader">
+      <input {...inputProps} ref={uploaderRef}></input>
+      <input {...inputProps} ref={audioUploaderRef} id={name + "-audio"} accept="audio/*"></input>
+      <ItemList
+        fileList={fileList}
+        baseUrl={isOssUpload ? baseUrl : ""}
+        disabled={disabled}
+        readOnly={readOnly}
+        onItemDel={onItemDel}
+        headers={headers}
+      />
+      {disabled || readOnly || (maxCount > 0 && fileList.length >= maxCount) ? null : (
+        <>
+          <div
+            className={`uploader-add-btn ${loading ? "uploader-add-btn-loading" : ""}`}
+            onClick={() => {
+              if (loading) {
+                return;
+              }
+              setActionSheetVisible(true);
+            }}
+            loading={loading}
+          >
+            {loading ? "上传中..." : uploadBtnNode ? uploadBtnNode : "+"}
+          </div>
+          <ActionSheet
+            cancelText="取消"
+            visible={actionSheetVisible}
+            actions={actions}
+            onAction={onPicker}
+            onClose={() => setActionSheetVisible(false)}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default forwardRef(Uploader);