@hzab/form-render 1.4.0 → 1.5.0-beta

package/src/components/Upload/README.md

@@ -12,26 +12,34 @@
 - 参数参考 antd upload 组件
 - props 参数 会覆盖 antd upload 组件已有配置项
 
-| 参数                 | 类型     | 必填 | 默认值   | 说明                                                               |
-| -------------------- | -------- | ---- | -------- | ------------------------------------------------------------------ |
-| name                 | string   | 否   | file     | 文件名                                                             |
-| accept               | string   | 否   | -        | 接受上传的文件类型, 详见 input accept Attribute                    |
-| listType             | string   | 否   | text     | 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card |
-| maxCount             | number   | 否   | -        | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件          |
-| maxSize              | number   | 否   | -        | 限制上传的文件大小。                                               |
-| multiple             | boolean  | 否   | -        | 是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件       |
-| disabled             | boolean  | 否   | false    | 禁用状态                                                           |
-| readOnly             | boolean  | 否   | false    | 只读状态                                                           |
-| isResRemoveArr       | boolean  | 否   | false    | maxCount === 1 时，结果是否自动去除数组嵌套                        |
-| isOssUpload          | boolean  | 否   | true     | 是否使用 oss 上传                                                  |
-| ossUrl               | string   | 否   | -        | 获取 oss 参数的接口，默认 /api/v1/user/oss/getWebOssConfig         |
-| ossOpt               | Object   | 否   | -        | oss 上传的配置参数                                                 |
-| isStrRes             | boolean  | 否   | false    | 是否使用字符串结果（表单中得到的一直是 oss URl 字符串）            |
-| previewConfig        | Object   | 否   | {}       | oss状态下需要拼接的url和query            |
-| onCountExceed        | Function | 否   | -        | 数量超出 maxCount 时的回调                                         |
-| beforeUploadCheck    | Function | 否   | -        | 追加的 beforeUpload 检查，返回 Promise.reject() 进行拦截           |
-| templateUrl          | string   | 否   | -        | 模板下载的地址                                                     |
-| templateDownloadText | string   | 否   | 模板下载 | 模板下载按钮的文案                                                 |
+| 参数                 | 类型     | 必填 | 默认值   | 说明                                                                                 |
+| -------------------- | -------- | ---- | -------- | ------------------------------------------------------------------------------------ |
+| name                 | string   | 否   | file     | 文件名                                                                               |
+| accept               | string   | 否   | -        | 接受上传的文件类型, 详见 input accept Attribute                                      |
+| listType             | string   | 否   | text     | 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card                   |
+| maxCount             | number   | 否   | -        | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件                            |
+| maxSize              | number   | 否   | -        | 限制上传的文件大小。                                                                 |
+| multiple             | boolean  | 否   | -        | 是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件                         |
+| disabled             | boolean  | 否   | false    | 禁用状态                                                                             |
+| readOnly             | boolean  | 否   | false    | 只读状态                                                                             |
+| isResRemoveArr       | boolean  | 否   | false    | maxCount === 1 时，结果是否自动去除数组嵌套                                          |
+| uploadMode           | string   | 否   | oss      | 上传模式： 阿里云 oss: oss, 内部定制私有化部署: offline, 文件: file, 自定义: custom, |
+| ossServerUrl         | string   | 否   | -        | 获取 oss 参数的接口，默认 /api/v1/user/oss/getWebOssConfig                           |
+| ossOpt               | Object   | 否   | -        | oss 上传的配置参数                                                                   |
+| fileListConf         | Object   | 否   | {}       | 结果数据配置                                                                         |
+| previewConfig        | Object   | 否   | {}       | 预览场景的配置                                                                       |
+| onCountExceed        | Function | 否   | -        | 数量超出 maxCount 时的回调                                                           |
+| beforeUploadCheck    | Function | 否   | -        | 追加的 beforeUpload 检查，返回 Promise.reject() 进行拦截                             |
+| templateUrl          | string   | 否   | -        | 模板下载的地址                                                                       |
+| templateDownloadText | string   | 否   | 模板下载 | 模板下载按钮的文案                                                                   |
+
+### fileListConf 结果数据配置
+
+| 参数     | 类型   | 必填 | 默认值 | 说明                         |
+| -------- | ------ | ---- | ------ | ---------------------------- | --------- | ---------- | --------- |
+| listMode | string | 否   | array  | 列表数据模式 "array"         | "jsonStr" | "splitStr" |
+| split    | string | 否   | ", "   | 字符串列表数据模式下的分隔符 |
+| itemMode | string | 否   | "url"  | 子项数据模式 "object"        | "file"    | "url"      | "jsonStr" |
 
 ### ossOpt
 

package/src/components/Upload/common/customRequest.ts

@@ -0,0 +1,34 @@
+import LUploadOss from "./ossUpload";
+
+export const getOfflineUploadRequest = (props) => {
+  return ({ action, data, file, filename, headers, method, onSuccess, onProgress, onError }) => {
+    // TODO: 处理请求逻辑
+    // file.ossPromise = ;
+    onSuccess(file);
+  };
+};
+
+export const getOssUploadRequest = (opt) => {
+  const { UploadOss, ossServerUrl, ossOpt, params } = opt || {};
+  return ({ action, data, file, filename, headers, method, onSuccess, onProgress, onError }) => {
+    const _UploadOss = UploadOss || LUploadOss;
+    const ossUpload = new _UploadOss({
+      serverUrl: ossServerUrl,
+      ...ossOpt,
+    });
+    file.ossPromise = ossUpload
+      .upload(file, {
+        params: {
+          isPublic: 1,
+          ...(params || {}),
+        },
+      })
+      .then((res) => {
+        file.url = res?.data?.data?.fileUrl ?? res?.data?.fileUrl ?? res?.fileUrl;
+        file.ossUrl = file.url;
+        onSuccess(file);
+        return file;
+      })
+      .catch(onError);
+  };
+};

package/src/components/Upload/common/fileName.ts

@@ -0,0 +1,62 @@
+import { nanoid } from "./nanoid";
+
+/**
+ * 从 url 获取文件名称，不包含后缀
+ * @param {*} fileName
+ * @param {*} str
+ * @returns
+ */
+export function getFileName(fileUrl) {
+  const res = fileUrl?.match(/([^\/]+?)\.[^\/\.]+$/);
+  if (res && res.length > 0) {
+    return res?.[1] || res?.[0];
+  }
+  return fileUrl;
+}
+
+/**
+ * 从 url 获取文件名称，包含后缀
+ * @param {*} fileName
+ * @param {*} str
+ * @returns
+ */
+export function getFullFileName(fileUrl) {
+  const res = fileUrl?.match(/[^\/]+?\.[^\/\.]+$/);
+  if (res && res.length > 0) {
+    return res[0];
+  }
+  return fileUrl;
+}
+
+/**
+ * 合并文件名称，自动处理后缀
+ * @param {*} fileName
+ * @param {*} str
+ * @returns
+ */
+export const mergeFileName = function (fileName, str) {
+  const name = fileName?.match(/([^\/]+?)\.[^\/]+$/)?.[1] || "";
+  const suffix = fileName?.match(/[^\/]+?\.([^\/]+)$/)?.[1] || "";
+  return `${name}${str}.${suffix}`;
+};
+
+/**
+ * 获取唯一的文件名
+ * @param {*} fileName
+ * @returns
+ */
+export const getUFileName = function (fileName) {
+  return mergeFileName(getFileName(fileName) || "rc-upload", `-${Date.now()}-${nanoid()}`);
+};
+
+/**
+ * 根据 file 对象获取文件名称，文件名称包含：初始名称、类型
+ * @param file
+ */
+export const getFileNameByFileObj = (file) => {
+  const _fileName = file.name || getFullFileName(file.url);
+  if (_fileName.indexOf("--Cs--") >= 0) {
+    return _fileName;
+  }
+  return mergeFileName(_fileName, `--Cs--${file.type?.replace(/[\/\-\+]/g, "_")}-${Date.now()}-${nanoid()}`);
+};

package/src/components/Upload/common/handleIOFileList.ts

@@ -0,0 +1,302 @@
+import { getFileURL, getFileType, isBase64Str } from "./utils";
+import { getUFileName, getFileName, getFullFileName } from "./fileName";
+import { nanoid } from "./nanoid";
+
+/**
+ * 出入参归一化
+ * 统一成对象格式用于内部处理
+ {
+ }
+ 
+ */
+
+/**
+ * 出入参数据子项处理配置项
+ */
+export interface IFile {
+  /** 唯一 id */
+  uid: string;
+  /** 存储的文件名称 */
+  name: string;
+  /** 上传的文件名称 */
+  sourceName: string;
+  /** 文件地址 */
+  url: string;
+  /** 文件预览地址 */
+  previewUrl?: string;
+  /** 文件类型 */
+  type: string;
+  /** 文件大小 */
+  size: number;
+  /** 原始 file 文件 */
+  originFileObj?: File;
+  /** 最后更新时间戳 */
+  lastModified?: number;
+}
+
+/**
+ * 出入参数据处理配置项
+ */
+export interface IHandlerOpt {
+  /** 列表数据模式：数组 | 字符串 */
+  listMode: "array" | "jsonStr" | "splitStr";
+  /** 字符串列表数据模式下的分隔符 */
+  split: string;
+  /** 子项数据模式： 格式化对象 | file 文件格式 | url 地址 | JSON 序列化字符串 */
+  itemMode: "object" | "file" | "url" | "jsonStr";
+  /** 预览配置参数 */
+  previewConfig?: Object;
+}
+
+/** 内部文件格式 */
+const fileTpl: IFile = {
+  uid: "",
+  /** 上传的文件名称 */
+  sourceName: "",
+  /** 存储的文件名称 */
+  name: "",
+  /** 文件地址 */
+  url: "",
+  /** 文件预览地址 */
+  previewUrl: "",
+  /** 文件类型 */
+  type: "",
+  /** 文件大小 */
+  size: undefined,
+  /** 最后更新时间戳 */
+  lastModified: undefined,
+  /** 源文件 */
+  originFileObj: undefined,
+};
+
+/**
+ * 对象字符串转为对象
+ * @param objStr
+ */
+export const objStrToObj = function (objStr) {
+  let _objStr = objStr;
+  if (typeof _objStr === "object") {
+    return _objStr;
+  }
+  // 对象字符串 转为 对象
+  if (typeof _objStr === "string") {
+    _objStr = _objStr.trim();
+    if (/^\[.*\]$|^\{.*\}$/.test(_objStr)) {
+      try {
+        _objStr = JSON.parse(_objStr);
+      } catch (error) {}
+    }
+  }
+  return _objStr;
+};
+
+/**
+ * 预览 url 添加前缀
+ * @param {*} uri
+ * @param {*} previewConfig
+ * @returns
+ */
+export function mergePreviewConfig(uri, previewConfig) {
+  let _uri = uri?.trim();
+  // base64 直接返回
+  if (isBase64Str(_uri)) {
+    return _uri;
+  }
+  const isUriPattern = /http[s]?:\/\/[^\s]+/.test(_uri);
+  const query = previewConfig?.query?.trim() ? "?" + previewConfig?.query?.trim() : "";
+
+  if (isUriPattern) {
+    // 源地址为 http 地址，直接拼接 query 参数
+    return `${_uri}${query}`;
+  }
+
+  if (previewConfig) {
+    // 拼接前缀
+    return `${previewConfig?.url?.trim()}/${_uri}${query}`?.trim();
+  }
+
+  return _uri;
+}
+
+/**
+ * 子项数据归一化
+ * 字符串：url、base64
+ * 对象：
+ * 统一成对象格式用于内部处理
+ */
+export const handleInputItem = (data, opt: IHandlerOpt) => {
+  if (!data) {
+    console.warn("Upload handleInputData 请传入正确的数据");
+    return data;
+  }
+  let file = {
+    ...fileTpl,
+  };
+  // 对象字符串 转为 对象
+  const _data = objStrToObj(data);
+  if (typeof _data === "string") {
+    file.url = _data;
+    file.sourceName = getFullFileName(file.url);
+    file.name = file.sourceName;
+    file.type = getFileType(_data);
+  } else if (typeof _data === "object") {
+    const sourceData = _data.originFileObj || _data;
+    file.uid = _data.uid;
+    file.url = sourceData.url || sourceData.ossUrl;
+    file.sourceName = _data.sourceName || getFullFileName(file.url) || _data.name;
+    file.name = _data.name || getFullFileName(file.url);
+    file.type = _data.type;
+    file.size = _data.size;
+    file.originFileObj = data instanceof File ? data : undefined;
+    file.lastModified = _data.lastModified;
+  }
+  if (!file.uid) {
+    file.uid = `${getFileName(file.url || file.name) || "rc-upload"}-${Date.now()}-${nanoid()}`;
+  }
+  if (!file.name) {
+    file.name = file.uid;
+  }
+
+  const { previewConfig } = opt || {};
+
+  // 合并预览地址？
+  file.previewUrl = mergePreviewConfig(file.url, previewConfig);
+
+  return file;
+};
+
+/**
+ * fileList 数据归一化
+ * 统一成对象格式用于内部处理
+ */
+export const handleInputFileList = (fileList, opt: IHandlerOpt) => {
+  if (!fileList) {
+    return [];
+  }
+
+  let _fileList = fileList;
+  const { listMode, split } = opt || {};
+
+  // 统一成数组格式
+  if (_fileList !== null && _fileList !== undefined && !Array.isArray(_fileList)) {
+    _fileList = [_fileList];
+  }
+
+  // splitStr jsonStr 模式下 Upload 自动将字符串嵌套了数组，需要手动处理
+  if (listMode === "splitStr" || listMode === "jsonStr") {
+    if (Array.isArray(_fileList) && _fileList.length === 1 && typeof _fileList[0] === "string") {
+      // @ts-ignore
+      _fileList = _fileList[0];
+    }
+    if (typeof _fileList === "string") {
+      if (listMode === "splitStr") {
+        // @ts-ignore
+        _fileList = _fileList?.split(split ?? ", ");
+      }
+
+      if (listMode === "jsonStr") {
+        _fileList = objStrToObj(_fileList);
+      }
+    }
+  }
+
+  if (Array.isArray(_fileList)) {
+    const arrRes = [];
+    _fileList.forEach((it) => {
+      const itRes = handleInputItem(it, opt);
+      itRes && arrRes.push(itRes);
+    });
+    return arrRes;
+  }
+  return _fileList;
+};
+
+export const handleFileName = function () {};
+
+/**
+ * 子项数据归一化
+ * @param data
+ * @returns
+ */
+export const formatItem = function (data) {
+  let url = data.url || (data instanceof File ? getFileURL(data) : data.url);
+  const res = {
+    /** 唯一 id */
+    uid: data.uid || getUFileName(data.name),
+    /** 上传的文件名称 */
+    sourceName: data.sourceName || data.name,
+    /** 存储的文件名称 */
+    name: data.url ? getFullFileName(data.url) : data.name,
+    /** 文件地址 */
+    url: url,
+    /** 文件类型 */
+    type: data.type,
+    /** 文件大小 */
+    size: data.size,
+    /** 最后更新时间戳 */
+    lastModified: data.lastModified,
+    originFileObj: data instanceof File ? data : undefined,
+  };
+  if (!res.name) {
+    res.name = res.uid;
+  }
+  if (!res.sourceName) {
+    res.sourceName = res.name;
+  }
+  return res;
+};
+
+/**
+ * 出参子项归一化
+ * 根据配置，将 对象 处理成所需格式
+ */
+export const handleUploadItem = function (file, opt: IHandlerOpt) {
+  const { itemMode = "object" } = opt || {};
+  if (itemMode === "file") {
+    return file?.originFileObj || file;
+  }
+  if (itemMode === "object") {
+    return formatItem(file);
+  }
+  if (itemMode === "jsonStr" && typeof file !== "string") {
+    const { originFileObj, ...jFile } = formatItem(file);
+    return JSON.stringify({ ...jFile });
+  }
+  if (itemMode === "url") {
+    return typeof file === "string" ? file : file.originFileObj?.url || file?.url;
+  }
+  return file;
+};
+
+/**
+ * 出参 fileList 归一化
+ * 根据配置，将 对象 处理成所需格式
+ */
+export const handleOutputFileList = function (fileList, opt: IHandlerOpt) {
+  if (!fileList) {
+    return undefined;
+  }
+
+  const { listMode, split } = opt || {};
+
+  let _fileList = fileList;
+  if (_fileList && !Array.isArray(_fileList)) {
+    _fileList = [fileList];
+  }
+
+  // 数组
+  if (listMode === "array") {
+    return _fileList?.map((it) => handleUploadItem(it, opt));
+  }
+  // 序列化后的字符串
+  if (listMode === "jsonStr") {
+    return JSON.stringify(_fileList?.map((it) => handleUploadItem(it, opt)));
+  }
+  // join 后的字符串
+  if (listMode === "splitStr") {
+    return _fileList
+      ?.map((it) => handleUploadItem(it, opt))
+      .filter((it) => it)
+      .join(split ?? ", ");
+  }
+};

package/src/components/Upload/common/nanoid.ts

@@ -0,0 +1,7 @@
+import { customAlphabet } from "nanoid";
+/**
+ * 指定 nanoid 字符集合
+ */
+export const alphabet = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+export const nanoid = customAlphabet(alphabet, 10);

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

@@ -1,5 +1,5 @@
 import { axios } from "@hzab/data-model";
-import { nanoid } from "nanoid";
+import { getFileNameByFileObj } from "./fileName";
 
 export function getSignature(opt = {}) {
   const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;
@@ -58,16 +58,7 @@ class OssUpload {
       const formData = new FormData();
       // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
       // filename 表示待上传的本地文件名称。
-      let filename = file?.name;
-      if (file?.name) {
-        const nameArr = file?.name.match(/^(.+)\.(.+)$/);
-        if (nameArr && nameArr.length > 2) {
-          filename = `${nameArr[1]}_${Date.now()}_${nanoid()}.${nameArr[2]}`;
-        }
-      }
-      if (!filename) {
-        filename = `${Date.now()}_${nanoid()}.${file.type?.replace(/\w+\/, ''/)}`;
-      }
+      const filename = getFileNameByFileObj(file);
       const key = `${ossParams?.dir}${filename}`;
       formData.set("key", key);
       formData.set("OSSAccessKeyId", ossParams.accessid);
@@ -122,7 +113,7 @@ export async function handleOssUpload(files, opt) {
   const promise = [];
   _files?.forEach((file) => {
     // 数据已经是 url 的情况
-    if (typeof file === "string" || file.ossUrl) {
+    if (typeof file === "string" || file.ossUrl || file.url) {
       promise.push(Promise.resolve(file));
     } else {
       promise.push(
@@ -144,7 +135,12 @@ export async function handleOssUpload(files, opt) {
 
   return Promise.all(promise).then((filePromises) => {
     filePromises?.forEach((fileUrl, idx) => {
-      _files[idx].ossUrl = fileUrl;
+      if (typeof fileUrl === "string") {
+        _files[idx].ossUrl = fileUrl;
+        _files[idx].url = fileUrl;
+      } else if (_files[idx].url) {
+        _files[idx].ossUrl = _files[idx].url;
+      }
     });
     return Promise.resolve(_files);
   });

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

@@ -7,19 +7,24 @@ import { nanoid } from "nanoid";
  * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
  */
 export function getFileURL(file) {
-  let url = file.url || null;
+  const _file = file?.file || file;
+  if (!(_file instanceof File)) {
+    return;
+  }
+
+  let url = _file.url || null;
 
   try {
     // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
     if (window.createObjectURL != undefined) {
       // basic
-      url = window.createObjectURL(file);
+      return window.createObjectURL(_file);
     } else if (window.URL != undefined) {
       // mozilla(firefox)
-      url = window.URL.createObjectURL(file);
+      return window.URL.createObjectURL(_file);
     } else if (window.webkitURL != undefined) {
       // webkit or chrome
-      url = window.webkitURL.createObjectURL(file);
+      return window.webkitURL.createObjectURL(_file);
     }
   } catch (error) {
     console.warn("getFileURL Error: ", error);
@@ -28,12 +33,25 @@ export function getFileURL(file) {
   return url;
 }
 
+/**
+ * 是否是 base64 字符串
+ * @param {*} str
+ * @returns
+ */
+export const isBase64Str = function (str) {
+  return /^data:\w+\/\w+;base64/i.test(str);
+};
+
 /**
  * 判断 url 是否带有指定图片后缀
  * @param {string} url
  * @returns
  */
 export function checkImageUrl(url) {
+  // base64
+  if (/^data:image\/\w+;base64/i.test(url)) {
+    return true;
+  }
   const imgTypes = [
     "apng",
     "avif",
@@ -62,7 +80,7 @@ export function checkImageUrl(url) {
  */
 export function isValidMediaType(input) {
   const validPrefixes = ["image/", "video/", "audio/"];
-  return validPrefixes.some((prefix) => input.startsWith(prefix));
+  return validPrefixes.some((prefix) => input?.startsWith(prefix));
 }
 
 /**
@@ -102,14 +120,6 @@ export function checkUrlSuffix(url, types = [], caseSensitive) {
   }
 }
 
-export function getFileName(fileUrl) {
-  const res = fileUrl?.match(/[^\/]+?\.[^\/]+$/);
-  if (res && res.length > 0) {
-    return res[0];
-  }
-  return fileUrl;
-}
-
 export function getFileType(file) {
   if (typeof file === "object" && file?.type) {
     return file?.type;
@@ -149,6 +159,12 @@ export function handleMaxCount(fileList, maxCount) {
   return list;
 }
 
+/**
+ * 预览 url 添加前缀
+ * @param {*} uri
+ * @param {*} previewConfig
+ * @returns
+ */
 export function mergePreviewConfig(uri, previewConfig) {
   const isUriPattern = /http[s]?:\/\/[^\s]+/.test(uri);
   const query = previewConfig?.query ? "?" + previewConfig?.query : "";

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

@@ -15,9 +15,8 @@ export const ItemList = (props) => {
         if (!it) {
           return null;
         }
-        const { name, url = it?.ossUrl } = it || {};
-
-        let src = url || getFileURL(it);
+        const { name, previewUrl = it?.url || it?.ossUrl } = it || {};
+        let src = previewUrl || getFileURL(it?.originFileObj || it);
 
         if (baseUrl) {
           src = baseUrl + src;

package/src/components/Upload/components/PreviewModal/index.tsx

@@ -10,7 +10,6 @@ export const PreviewModal = (props) => {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    console.log(previewFile)
     setOpen(!!previewFile || false);
   }, [previewFile]);