@hzab/form-render-mobile 0.0.4 → 0.0.6

package/src/components/Uploader/common/ossUpload.js

@@ -0,0 +1,134 @@
+import axios from "axios";
+
+export function getSignature(opt = {}) {
+  const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;
+  // 减 10 秒，避免发起请求时 刚好过期的情况
+  if (
+    window.__ossSignatureRes &&
+    serverUrl === window.__ossSignatureRes.serverUrl &&
+    Date.now() - window.__ossSignatureRes.__saveTime < window.__ossSignatureRes.expireTimeMillis - 10000
+  ) {
+    return Promise.resolve(window.__ossSignatureRes);
+  }
+  const { axios: _ax, params = {}, axiosConf } = opt;
+  return (_ax || axios)
+    .get(serverUrl, {
+      ...axiosConf,
+      params: {
+        isPublic: 1,
+        ...params,
+      },
+    })
+    .then((res) => {
+      window.__ossSignatureRes = res?.data?.data;
+      if (window.__ossSignatureRes) {
+        window.__ossSignatureRes.__saveTime = Date.now();
+        window.__ossSignatureRes.serverUrl = serverUrl;
+      }
+      return window.__ossSignatureRes;
+    });
+}
+
+class OssUpload {
+  constructor(props = {}) {
+    this.axios = props.axios || axios;
+    this.serverUrl = props.serverUrl || "/api/v1/user/oss/getWebOssConfig";
+  }
+
+  getSignature(serverUrl = this.serverUrl, opt) {
+    return getSignature({ ...opt, serverUrl });
+  }
+
+  upload(file, opt = {}) {
+    return new Promise(async (resolve, reject) => {
+      const ossParams = await this.getSignature(this.serverUrl, {
+        ...opt,
+        params: opt.signatureParams,
+      });
+
+      const { ossParams: propOssParams } = opt || {};
+      const formData = new FormData();
+      // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
+      // filename表示待上传的本地文件名称。
+      const key = `${ossParams?.dir}${file?.name || `${Date.now()}.${file.type}`}`;
+      formData.set("key", key);
+      formData.set("OSSAccessKeyId", ossParams.accessid);
+      formData.set("policy", ossParams.policy);
+      formData.set("Signature", ossParams.signature);
+      if (ossParams.callback) {
+        formData.set("callback", ossParams.callback);
+      }
+      formData.set("success_action_status", 200);
+      formData.set("file", file);
+
+      if (propOssParams) {
+        for (const key in propOssParams) {
+          if (Object.hasOwnProperty.call(propOssParams, key)) {
+            formData.set(key, propOssParams[key]);
+          }
+        }
+      }
+
+      return this.axios
+        .post(ossParams.host, formData)
+        .then((res) => {
+          console.log("oss upload res", res, res.data);
+          resolve(res);
+          return res;
+        })
+        .catch((err) => {
+          console.log("oss upload err", err);
+          reject(err);
+          return Promise.reject(err);
+        });
+    });
+  }
+}
+
+/**
+ * 处理文件上传逻辑
+ * @param {Array} files
+ * @param {Object} opt
+ * @returns
+ */
+export async function handleOssUpload(files, opt) {
+  const _files = files;
+  const { ossUrl, signatureParams, ossParams, axiosConf } = opt || {};
+  const ossUpload = new OssUpload({
+    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
+  });
+
+  const promise = [];
+  _files?.forEach((file) => {
+    // 数据已经是 url 的情况
+    if (typeof file === "string") {
+      promise.push(Promise.resolve(file));
+    } else {
+      promise.push(
+        ossUpload
+          .upload(file, {
+            signatureParams: {
+              isPublic: 1,
+              ...(signatureParams || {}),
+            },
+            ossParams,
+            axiosConf,
+          })
+          .then((res) => {
+            return Promise.resolve(res?.data?.data?.fileUrl);
+          }),
+      );
+    }
+  });
+
+  return Promise.all(promise).then((filePromises) => {
+    filePromises?.forEach((fileUrl) => {
+      _files.ossUrl = fileUrl;
+    });
+    return Promise.resolve(_files);
+  });
+}
+
+export { axios };
+
+export default OssUpload;

package/src/components/Uploader/index.jsx

@@ -3,20 +3,29 @@ import { connect, mapProps } from "@formily/react";
 import Uploader from "./uploader";
 
 function UploaderCom(props) {
-  const { field = {}, onChange } = props;
+  const { field = {}, onChange, value } = props;
   const { name, mode, componentProps = {} } = field;
+  const { multiple } = componentProps;
 
-  function onUploadChange(files) {
+  async function onUploadChange(files) {
+    let _files = files;
     if (field?.autoUpload && props.fieldsConf[name]?.onUpload) {
-      props.fieldsConf[name]?.onUpload(files);
-      return;
+      _files = await props.fieldsConf[name]?.onUpload(files);
+      if (!_files) {
+        return;
+      }
     }
-    onChange && onChange(files);
+    // 若单选模式，默认只返回对应数据，而非嵌套一层数组
+    if (!multiple && _files && _files.length === 1) {
+      _files = _files[0];
+    }
+    onChange && onChange(_files);
   }
 
   const _props = {
     mode: mode,
     ...props,
+    value: typeof value === "string" ? [value] : value,
     ...componentProps,
   };
 

package/src/components/Uploader/uploader.jsx

@@ -1,12 +1,14 @@
 import { useState, useRef, useEffect, useMemo } from "react";
-import { Button, Dialog, ActionSheet } from "antd-mobile";
+import { Button, Dialog, ActionSheet, Toast } from "antd-mobile";
 import { CloseCircleFill } from "antd-mobile-icons";
+import { nanoid } from "nanoid";
 
 import Video from "./video";
 import Image from "./Image";
 
 import { getImage, getVideo, getAudio } from "./common/cordova-camera";
 import { getFileURL, checkImageUrl, checkVideoUrl, checkAudioUrl } from "./common/utils";
+import { handleOssUpload } from "./common/ossUpload";
 
 import "./uploader.less";
 
@@ -28,24 +30,52 @@ function Uploader(props) {
     readOnly,
     value,
     baseUrl = "",
+    // 文件大小限制
+    maxSize,
+    maxCount,
+    isOssUpload,
+    ossUrl,
+    ossOpt,
+    onCountExceed,
   } = props;
   const [curAccept, setCurAccept] = useState(accept);
-  const [fileList, setFileList] = useState(value || []);
+  const [fileList, setFileList] = useState(Array.isArray(value) ? value : (value && [value]) || []);
   const [actionSheetVisible, setActionSheetVisible] = useState(false);
-
   useEffect(() => {
-    setFileList(value || []);
+    setFileList(Array.isArray(value) ? value : (value && [value]) || []);
   }, [value]);
 
-  function onFileChange(e) {
+  async function onFileChange(e) {
     e.persist();
     const { files: rawFiles } = e.target;
-    let files = [].slice.call(rawFiles)?.map((it) => {
+    let files = [].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 = Date.now();
+        it.uid = nanoid();
+      }
+      if (maxSize && it.size > maxSize) {
+        Toast.show({
+          icon: "fail",
+          content: "文件大小超出限制：" + it.size,
+        });
+        return false;
       }
       return it;
     });
+    // 处理 oss 逻辑
+    if (isOssUpload) {
+      files = await handleOssUpload(files, { ...ossOpt, ossUrl });
+    }
+
     e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
     handleChange(files);
   }
@@ -232,7 +262,10 @@ function Uploader(props) {
 
         return it.name;
       })}
-      {disabled || readOnly || (!multiple && fileList.length > 0) ? null : (
+      {disabled ||
+      readOnly ||
+      (!multiple && fileList.length > 0) ||
+      (maxCount > 0 && fileList.length >= maxCount) ? null : (
         <>
           <Button
             className="uploader-add-btn"

package/src/components/index.ts

@@ -6,4 +6,8 @@ import DatePicker from "./DatePicker";
 import Password from "./Password";
 import Uploader from "./Uploader";
 
+export * from "./ArrayCards";
+export * from "./ArrayTable";
+export * from "./FormCollapse";
+
 export { NumberPicker, Password, Select, Cascader, DatePicker, Text, Uploader };