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

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

@@ -1,61 +1,69 @@
-import { axios } from "@hzab/data-model";
-import OssUpload from "@hzab/utils/src/upload/ossUpload";
-
-/**
- * 处理文件上传逻辑
- * @param {Array} files
- * @param {Object} opt
- * @returns
- */
-export async function handleOssUpload(files, opt) {
-  const _files = files;
-  const { ossUrl, signatureParams, ossParams, axiosConf, beforeUpload } = opt || {};
-  const ossUpload = new OssUpload({
-    axios: opt.axios,
-    axiosConf: axiosConf,
-    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
-  });
-
-  const promise = [];
-  _files?.forEach((file) => {
-    // 数据已经是 url 的情况
-    if (typeof file === "string") {
-      promise.push(Promise.resolve(file));
-    } else if (typeof file.ossUrl === "string") {
-      promise.push(Promise.resolve(file.ossUrl));
-    } else {
-      promise.push(
-        new Promise(async (resolve, reject) => {
-          const f = (await (beforeUpload && beforeUpload(file, { reject }))) || file;
-
-          ossUpload
-            .upload(f, {
-              ...opt,
-              signatureParams: {
-                isPublic: 1,
-                ...(signatureParams || {}),
-              },
-              ossParams,
-              axiosConf,
-            })
-            .then((res) => {
-              resolve(res?.data?.data?.fileUrl);
-              return Promise.resolve(res?.data?.data?.fileUrl);
-            })
-            .catch(reject);
-        }),
-      );
-    }
-  });
-
-  return Promise.all(promise).then((filePromises) => {
-    filePromises?.forEach((fileUrl, idx) => {
-      _files[idx].ossUrl = fileUrl;
-    });
-    return Promise.resolve(_files);
-  });
-}
-
-export { axios };
-
-export default OssUpload;
+import { axios } from "@hzab/data-model";
+import OssUpload from "@hzab/utils/src/upload/ossUpload";
+
+/**
+ * 处理文件上传逻辑
+ * @param {Array} files
+ * @param {Object} opt
+ * @returns
+ */
+export async function handleOssUpload(files, opt) {
+  const _files = files;
+  const { ossUrl, signatureParams, ossParams, axiosConf, beforeUpload, thumbnailParams } = opt || {};
+  const ossUpload = new OssUpload({
+    axios: opt.axios,
+    axiosConf: axiosConf,
+    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
+  });
+
+  const promise = [];
+  _files?.forEach((file) => {
+    // 数据已经是 url 的情况
+    if (typeof file === "string") {
+      promise.push(Promise.resolve(file));
+    } else if (typeof file.ossUrl === "string") {
+      promise.push(Promise.resolve(file.ossUrl));
+    } else {
+      promise.push(
+        new Promise(async (resolve, reject) => {
+          const f = (await (beforeUpload && beforeUpload(file, { reject }))) || file;
+
+          ossUpload
+            .upload(f, {
+              ...opt,
+              signatureParams: {
+                isPublic: 1,
+                ...(signatureParams || {}),
+              },
+              ossParams,
+              axiosConf,
+              thumbnailParams,
+            })
+            .then((res) => {
+              resolve({
+                fileUrl: res?.data?.data?.fileUrl,
+                thumbnailUrl: res?.data?.data?.thumbnailUrl,
+              });
+              return Promise.resolve({
+                fileUrl: res?.data?.data?.fileUrl,
+                thumbnailUrl: res?.data?.data?.thumbnailUrl,
+              });
+            })
+            .catch(reject);
+        }),
+      );
+    }
+  });
+
+  return Promise.all(promise).then((filePromises) => {
+    filePromises?.forEach((item, idx) => {
+      _files[idx].ossUrl = item?.fileUrl;
+      _files[idx].thumbnailUrl = item?.thumbnailUrl;
+    });
+    return Promise.resolve(_files);
+  });
+}
+
+export { axios };
+
+export default OssUpload;

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

@@ -1,142 +1,147 @@
-import { nanoid } from "nanoid";
-
-/**
- *  建立一个可以存取该 file 的 url
- * @param {Object} file 文件
- * @returns {string} url
- * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
- */
-export function getFileURL(file) {
-  let url = file.url || null;
-
-  try {
-    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
-    if (window.createObjectURL != undefined) {
-      // basic
-      url = window.createObjectURL(file);
-    } else if (window.URL != undefined) {
-      // mozilla(firefox)
-      url = window.URL.createObjectURL(file);
-    } else if (window.webkitURL != undefined) {
-      // webkit or chrome
-      url = window.webkitURL.createObjectURL(file);
-    }
-  } catch (error) {
-    console.warn("getFileURL Error: ", error);
-  }
-
-  return url;
-}
-
-/**
- * 判断 url 是否带有指定图片后缀
- * @param {string} url
- * @returns
- */
-export function checkImageUrl(url) {
-  const imgTypes = [
-    "apng",
-    "avif",
-    "bmp",
-    "gif",
-    "ico",
-    "cur",
-    "jpg",
-    "jpeg",
-    "jfif",
-    "pjpeg",
-    "pjp",
-    "png",
-    "svg",
-    "tif",
-    "tiff",
-    "webp",
-  ];
-  return checkUrlSuffix(url, imgTypes);
-}
-
-/**
- * 判断 url 是否带有指定视频后缀
- * @param {string} url
- * @returns
- */
-export function checkVideoUrl(url) {
-  const imgTypes = ["3gp", "mpg", "mpeg", "mp4", "m4v", "m4p", "ogv", "ogg", "mov", "webm"];
-  return checkUrlSuffix(url, imgTypes);
-}
-
-/**
- * 判断 url 是否带有指定音频后缀
- * @param {string} url
- * @returns
- */
-export function checkAudioUrl(url) {
-  const imgTypes = ["3gp", "adts", "mpeg", "mp3", "mp4", "ogg", "mov", "webm", "rtp", "amr", "wav"];
-  return checkUrlSuffix(url, imgTypes);
-}
-
-/**
- * 检查 url 是否带有指定后缀
- * @param {string} url url 地址
- * @param {Array} types 后缀数组
- * @returns
- */
-export function checkUrlSuffix(url, types = [], caseSensitive) {
-  if (!url) {
-    return false;
-  }
-  let _url = url?.replace(/\?.+/, "");
-  const reg = new RegExp(`\.(${types.join("|")})$`, caseSensitive ? undefined : "i");
-  if (reg.test(_url)) {
-    return true;
-  }
-}
-
-function getArr(value) {
-  return Array.isArray(value) ? value : (value && [value]) || [];
-}
-
-export function handleMaxCount(fileList, maxCount) {
-  let list = getArr(fileList);
-  if (maxCount > 0 && list.length > maxCount) {
-    list = list.slice(maxCount);
-  }
-  return list;
-}
-
-/**
- * 处理传入的数据，数据格式统一转成 Array<fileObject>
- * @param {Array} fileList Array<fileObject|string>
- * @param {number} maxCount
- * @returns Array<fileObject>
- */
-export function handleInputFileList(_fileList, maxCount = 1) {
-  const fileList = handleMaxCount(getArr(_fileList), maxCount);
-  if (fileList.length === 0) {
-    return fileList;
-  }
-  let resList = fileList;
-  if (!Array.isArray(resList)) {
-    resList = [resList];
-  }
-  resList = fileList.map((file, i) => {
-    if (typeof file === "string") {
-      const uid = nanoid();
-      return {
-        name: uid,
-        uid: uid,
-        ossUrl: file,
-        url: file,
-        // size: Infinity,
-      };
-    }
-    if (file && !file.uid) {
-      file.uid = nanoid();
-    }
-    if (file && !file.name) {
-      file.name = file.uid;
-    }
-    return file;
-  });
-  return resList;
-}
+import { nanoid } from "nanoid";
+
+/**
+ *  建立一个可以存取该 file 的 url
+ * @param {Object} file 文件
+ * @returns {string} url
+ * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
+ */
+export function getFileURL(file) {
+  let url = file.url || null;
+
+  try {
+    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
+    if (window.createObjectURL != undefined) {
+      // basic
+      url = window.createObjectURL(file);
+    } else if (window.URL != undefined) {
+      // mozilla(firefox)
+      url = window.URL.createObjectURL(file);
+    } else if (window.webkitURL != undefined) {
+      // webkit or chrome
+      url = window.webkitURL.createObjectURL(file);
+    }
+  } catch (error) {
+    console.warn("getFileURL Error: ", error);
+  }
+
+  return url;
+}
+
+/**
+ * 判断 url 是否带有指定图片后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkImageUrl(url) {
+  const imgTypes = [
+    "apng",
+    "avif",
+    "bmp",
+    "gif",
+    "ico",
+    "cur",
+    "jpg",
+    "jpeg",
+    "jfif",
+    "pjpeg",
+    "pjp",
+    "png",
+    "svg",
+    "tif",
+    "tiff",
+    "webp",
+  ];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定视频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkVideoUrl(url) {
+  const imgTypes = ["3gp", "mpg", "mpeg", "mp4", "m4v", "m4p", "ogv", "ogg", "mov", "webm"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定音频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkAudioUrl(url) {
+  const imgTypes = ["3gp", "adts", "mpeg", "mp3", "mp4", "ogg", "mov", "webm", "rtp", "amr", "wav"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 检查 url 是否带有指定后缀
+ * @param {string} url url 地址
+ * @param {Array} types 后缀数组
+ * @returns
+ */
+export function checkUrlSuffix(url, types = [], caseSensitive) {
+  if (!url) {
+    return false;
+  }
+  let _url = url?.replace(/\?.+/, "");
+  const reg = new RegExp(`\.(${types.join("|")})$`, caseSensitive ? undefined : "i");
+  if (reg.test(_url)) {
+    return true;
+  }
+}
+
+function getArr(value) {
+  return Array.isArray(value) ? value : (value && [value]) || [];
+}
+
+export function handleMaxCount(fileList, maxCount) {
+  let list = getArr(fileList);
+  if (maxCount > 0 && list.length > maxCount) {
+    list = list.slice(maxCount);
+  }
+  return list;
+}
+
+/**
+ * 处理传入的数据，数据格式统一转成 Array<fileObject>
+ * @param {Array} fileList Array<fileObject|string>
+ * @param {number} maxCount
+ * @returns Array<fileObject>
+ */
+export function handleInputFileList(_fileList, maxCount = 1, opt) {
+  const fileList = handleMaxCount(getArr(_fileList), maxCount);
+  if (fileList.length === 0) {
+    return fileList;
+  }
+  let resList = fileList;
+  if (!Array.isArray(resList)) {
+    resList = [resList];
+  }
+  resList = fileList.map((file, i) => {
+    if (typeof file === "string") {
+      const uid = nanoid();
+      let thumbnailUrl = "";
+      if (opt?.ossOpt?.signatureParams?.isPublic !== 0) {
+        thumbnailUrl = `${file}${opt?.thumbnailParams ? "?" + opt?.thumbnailParams : ""}`;
+      }
+      return {
+        name: uid,
+        uid: uid,
+        ossUrl: file,
+        url: file,
+        thumbnailUrl: thumbnailUrl,
+        // size: Infinity,
+      };
+    }
+    if (file && !file.uid) {
+      file.uid = nanoid();
+    }
+    if (file && !file.name) {
+      file.name = file.uid;
+    }
+    return file;
+  });
+  return resList;
+}

package/src/components/Uploader/components/Image/index.tsx

@@ -1,45 +1,45 @@
-import { useState, useEffect } from "react";
-import { ImageViewer } from "antd-mobile";
-
-import { loadHeaderImage } from "../../common/img";
-
-import "./index.less";
-
-function ImagePreviewer(props) {
-  const { headers, src } = props;
-  const [maskVisible, setMaskVisible] = useState(false);
-  const [imgUrl, setImgUrl] = useState("");
-
-  function onPreview() {
-    setMaskVisible(true);
-  }
-
-  const init = async () => {
-    if (headers) {
-      loadHeaderImage(src, headers).then(setImgUrl);
-    } else {
-      setImgUrl(src);
-    }
-  };
-
-  useEffect(() => {
-    init();
-  }, [src]);
-
-  return (
-    <div className={`uploader-image-previewer ${props.className || ""}`}>
-      <div className="uploader-image-previewer-img-wrap" onClick={onPreview}>
-        <img className="uploader-image-previewer-img" src={imgUrl} alt={props.alt} onClick={onPreview} />
-      </div>
-      <ImageViewer
-        image={imgUrl}
-        visible={maskVisible}
-        onClose={() => {
-          setMaskVisible(false);
-        }}
-      />
-    </div>
-  );
-}
-
-export default ImagePreviewer;
+import { useState, useEffect } from "react";
+import { ImageViewer } from "antd-mobile";
+
+import { loadHeaderImage } from "../../common/img";
+
+import "./index.less";
+
+function ImagePreviewer(props) {
+  const { headers, src, thumbnailUrl } = props;
+  const [maskVisible, setMaskVisible] = useState(false);
+  const [imgUrl, setImgUrl] = useState("");
+
+  function onPreview() {
+    setMaskVisible(true);
+  }
+
+  const init = async () => {
+    if (headers) {
+      loadHeaderImage(src, headers).then(setImgUrl);
+    } else {
+      setImgUrl(src);
+    }
+  };
+
+  useEffect(() => {
+    init();
+  }, [src]);
+
+  return (
+    <div className={`uploader-image-previewer ${props.className || ""}`}>
+      <div className="uploader-image-previewer-img-wrap" onClick={onPreview}>
+        <img className="uploader-image-previewer-img" src={thumbnailUrl} alt={props.alt} onClick={onPreview} />
+      </div>
+      <ImageViewer
+        image={imgUrl}
+        visible={maskVisible}
+        onClose={() => {
+          setMaskVisible(false);
+        }}
+      />
+    </div>
+  );
+}
+
+export default ImagePreviewer;

package/src/components/Uploader/components/ItemList/index.tsx

@@ -1,49 +1,53 @@
-import { getFileURL } from "../../common/utils";
-
-import { TYPE_VIDEO, TYPE_IMG, TYPE_AUDIO, checkFileType } from "../../common/checkFileType";
-
-import Video from "../video";
-import Image from "../Image";
-import ItemRender from "./ItemRender";
-
-export const ItemList = (props) => {
-  const { fileList, baseUrl, disabled, readOnly, onItemDel, headers } = props || {};
-
-  return (
-    <>
-      {fileList.map((it, idx) => {
-        if (!it) {
-          return null;
-        }
-        const { name, url = it?.ossUrl } = it || {};
-
-        let src = url || getFileURL(it);
-
-        if (baseUrl) {
-          src = baseUrl + src;
-        }
-
-        let content = it?.name;
-
-        const fileType = checkFileType(it);
-        if (fileType === TYPE_IMG) {
-          content = <Image className="file-item-view" headers={headers} src={src} alt={name} />;
-        }
-        if (fileType === TYPE_VIDEO) {
-          content = <Video src={src} href={src} />;
-        }
-        if (fileType === TYPE_AUDIO) {
-          content = <audio src={src} controls></audio>;
-        }
-
-        return (
-          <ItemRender index={idx} key={name + "_" + idx} disabled={disabled} readOnly={readOnly} onItemDel={onItemDel}>
-            <div className="file-item-content-box">{content}</div>
-          </ItemRender>
-        );
-      })}
-    </>
-  );
-};
-
-export default ItemList;
+import { getFileURL } from "../../common/utils";
+
+import { TYPE_VIDEO, TYPE_IMG, TYPE_AUDIO, checkFileType } from "../../common/checkFileType";
+
+import Video from "../video";
+import Image from "../Image";
+import ItemRender from "./ItemRender";
+
+export const ItemList = (props) => {
+  const { fileList, baseUrl, disabled, readOnly, onItemDel, headers } = props || {};
+
+  return (
+    <>
+      {fileList.map((it, idx) => {
+        if (!it) {
+          return null;
+        }
+        const { name, url = it?.ossUrl, thumbnailUrl } = it || {};
+
+        let src = url || getFileURL(it);
+        let thumbnailSrc = thumbnailUrl;
+
+        if (baseUrl) {
+          src = baseUrl + src;
+          thumbnailSrc = baseUrl + thumbnailUrl;
+        }
+
+        let content = it?.name;
+
+        const fileType = checkFileType(it);
+        if (fileType === TYPE_IMG) {
+          content = (
+            <Image className="file-item-view" headers={headers} src={src} thumbnailUrl={thumbnailSrc} alt={name} />
+          );
+        }
+        if (fileType === TYPE_VIDEO) {
+          content = <Video src={src} href={src} />;
+        }
+        if (fileType === TYPE_AUDIO) {
+          content = <audio src={src} controls></audio>;
+        }
+
+        return (
+          <ItemRender index={idx} key={name + "_" + idx} disabled={disabled} readOnly={readOnly} onItemDel={onItemDel}>
+            <div className="file-item-content-box">{content}</div>
+          </ItemRender>
+        );
+      })}
+    </>
+  );
+};
+
+export default ItemList;