@hzab/utils 0.0.1

package/src/upload/ossUpload.ts

@@ -0,0 +1,181 @@
+import { axios } from "@hzab/data-model";
+import { formatDirStr, mergeDirStr, getFileNameByFileObj } from "./uploadUtils";
+
+/**
+ * getSignature 配置
+ */
+export interface IGetSignatureOpt {
+  /** 获取配置的接口地址 */
+  serverUrl?: string;
+  /** axios 实例 */
+  axios?: typeof axios;
+  /** axios 配置参数 */
+  axiosConf?: Object;
+  /** 获取配置的接口自定义入参 */
+  params?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+  };
+}
+
+/**
+ * OssUpload props 参数
+ */
+export interface IOssUploadProps {
+  /** axios 实例 */
+  axios?: typeof axios;
+  /** axios 配置参数 */
+  axiosConf?: Object;
+  /** 获取配置的接口地址 */
+  serverUrl?: string;
+  /** 获取配置的接口自定义入参 */
+  signatureParams?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+  };
+}
+
+export interface IUploadOpt {
+  /** axios 实例 */
+  axios?: typeof axios;
+  /** axios 配置参数 */
+  axiosConf?: Object;
+  /** 获取配置的接口地址 */
+  serverUrl?: string;
+  /** 获取配置的接口自定义入参 */
+  params?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+  };
+  /** 文件上传的接口自定义入参 */
+  ossParams?: {};
+  /** 是否使用 hash 文件名 */
+  useHashName?: boolean;
+}
+
+export function getSignature(opt: IGetSignatureOpt = {}) {
+  const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;
+  // 减 10 秒，避免发起请求时 刚好过期的情况
+  if (
+    window._$ossSignatureRes &&
+    serverUrl === window._$ossSignatureRes.serverUrl &&
+    Date.now() - window._$ossSignatureRes.__saveTime < window._$ossSignatureRes.expireTimeMilles - 10000
+  ) {
+    return Promise.resolve(window._$ossSignatureRes);
+  }
+  const { axios: _ax = axios, params = {}, axiosConf } = opt;
+  // 处理 dir 格式，必须为非 / 开头， /  结尾。如： test/
+  params.dir = formatDirStr(params.dir);
+
+  return _ax
+    .get(serverUrl, {
+      ...axiosConf,
+      params: {
+        isPublic: 1,
+        ...params,
+      },
+    })
+    .then((res) => {
+      window._$ossSignatureRes = res?.data?.data ?? res?.data ?? res;
+      if (window._$ossSignatureRes) {
+        window._$ossSignatureRes.__saveTime = Date.now();
+        window._$ossSignatureRes.serverUrl = serverUrl;
+      }
+      return window._$ossSignatureRes;
+    });
+}
+
+/**
+ * oss 上传工具类
+ */
+class OssUpload {
+  /** axios 实例 */
+  axios: typeof axios;
+  /** axios 配置参数 */
+  axiosConf: Object;
+  /** 获取配置的接口地址 */
+  serverUrl: string;
+  /** 获取配置的接口自定义入参 */
+  signatureParams?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+  };
+
+  constructor(props: IOssUploadProps = {}) {
+    this.axios = props.axios || axios;
+    this.axiosConf = props.axiosConf || {};
+    this.serverUrl = props.serverUrl || "/api/v1/user/oss/getWebOssConfig";
+    this.signatureParams = props.signatureParams || {};
+  }
+
+  getSignature(serverUrl = this.serverUrl, opt) {
+    // dir 前缀 oss-upload 文件目录
+    opt.params.dir = mergeDirStr("web-upload/", opt.params.dir);
+    return getSignature({
+      ...opt,
+      serverUrl,
+      axios: opt?.axios || this.axios,
+      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
+    });
+  }
+
+  upload(file, opt: IUploadOpt = {}) {
+    return new Promise(async (resolve, reject) => {
+      const ossParams = await this.getSignature(opt.serverUrl || this.serverUrl, {
+        ...opt,
+        params: { ...this.signatureParams, ...opt.params },
+      });
+
+      const { ossParams: propOssParams } = opt || {};
+      const formData = new FormData();
+      // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
+      // filename 表示待上传的本地文件名称。
+      const filename = getFileNameByFileObj(file, opt);
+      const key = `${ossParams?.dir}${filename}`;
+      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);
+      }
+      // @ts-ignore
+      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]);
+          }
+        }
+      }
+
+      const _axios = opt?.axios || this.axios;
+
+      return _axios
+        .post(ossParams.host, formData, { ...this.axiosConf, ...opt?.axiosConf })
+        .then((res) => {
+          resolve(res);
+          return res;
+        })
+        .catch((err) => {
+          console.error("oss upload err", err);
+          reject(err);
+          return Promise.reject(err);
+        });
+    });
+  }
+}
+
+export { axios };
+
+export default OssUpload;

package/src/upload/uploadUtils.ts

@@ -0,0 +1,118 @@
+import { getArr } from "../array";
+
+import { nanoidNumALetters } from "../nanoid";
+import { mergeFileName, getFullFileName } from "../file/fileName";
+
+/**
+ * 格式化 dir 字符串，必须为非 / 开头， /  结尾。如： test/
+ * @param {*} dir
+ * @returns
+ */
+export const formatDirStr = function (dir) {
+  return dir?.replace(/^\/(.*)\/*$/, "$1").replace(/(.?=*)\/*$/, "$1/");
+};
+
+/**
+ * 合并 dir 字符串
+ * @param {*} dir
+ */
+export const mergeDirStr = function (dir1, dir2) {
+  return `${formatDirStr(dir1 || "")}${formatDirStr(dir2 || "")}`;
+};
+
+/**
+ * 限制文件数量
+ * @param fileList
+ * @param maxCount
+ * @returns
+ */
+export function handleMaxCount(fileList, maxCount) {
+  let list = getArr(fileList);
+  if (maxCount > 0 && list.length > maxCount) {
+    list = list.slice(0, maxCount);
+  }
+  return list;
+}
+
+/**
+ * 获取预览 url
+ * @param {*} uri
+ * @param {*} previewConfig
+ * @returns
+ */
+export function getPreviewUrl(uri, previewConfig) {
+  const isUriPattern = /http[s]?:\/\/[^\s]+/.test(uri);
+  const query = previewConfig?.query ? "?" + previewConfig?.query : "";
+
+  if (isUriPattern) return `${uri}${query}`?.trim();
+
+  if (previewConfig) return `${previewConfig?.url}/${uri}${query}`?.trim();
+
+  return uri;
+}
+
+/**
+ * 根据 file 对象获取文件名称，文件名称包含：初始名称、类型
+ * 数据存储格式 ~k[key]-[data]~ 如： ~ktime-1743649562530~
+ * key、data 中的 ~ 转为 _
+ * @param file
+ */
+export const getFileNameByFileObj = (file, opt: any) => {
+  const { useHashName = true } = opt || {};
+  const _fileName = file.name || getFullFileName(file.url);
+  if (_fileName.indexOf("~kid-") >= 0 || !useHashName) {
+    return _fileName;
+  }
+  // id、时间、文件类型
+  const id = file.id || file.uid || nanoidNumALetters();
+  return mergeFileName(
+    _fileName,
+    "-" +
+      setFileNameObj({
+        id,
+        time: file.createTime ?? Date.now(),
+        type: (file.type || file.contentType)?.replace("/", "_"),
+      }),
+  );
+};
+
+/**
+ * 解析
+ * @param url
+ * @returns
+ */
+export const getFileNameObj = function (url): any {
+  const list = url.match(/~k([^-~]+)-([^~]*)~/g);
+  const res = {};
+  list?.forEach((it) => {
+    const arr = it?.match(/~k([^-~]+)-([^~]*)~/);
+    if (arr?.length >= 3) {
+      res[arr[1]] = arr[2];
+    }
+  });
+  return res;
+};
+
+/**
+ * 解析
+ * @param url
+ * @returns
+ */
+export function setFileNameObj(obj) {
+  return Object.keys(obj)
+    .map((key) => {
+      return `~k${key?.replace(/~/g, "_")}-${obj[key]?.toString()?.replace(/~/g, "_")}~`;
+    })
+    .join("");
+}
+
+/**
+ * 通过 key 获取对应的值
+ * @param url
+ * @param key
+ * @returns
+ */
+export const getValByKey = function (url, key) {
+  const reg = new RegExp(`~k${key?.replace(/~/g, "_")}-\([^~]*\)~`);
+  return url.match(reg)?.[1];
+};

package/src/url.ts

@@ -0,0 +1,120 @@
+/**
+ * 替换 search 字符串
+ * @param url
+ * @param search
+ * @returns
+ */
+export function replaceSearch(url, search) {
+  if (!url || typeof url !== "string") {
+    console.warn("Warn handleUrlQuery: 请传入正确的 url 字符串");
+    return url;
+  }
+  let _url = fixUrlQuery(url);
+
+  const hashIdx = _url.indexOf("#");
+  const queryIdx = _url.indexOf("?");
+  let hash = "";
+  let resUrl = _url;
+  if (queryIdx >= 0) {
+    resUrl = _url.slice(0, queryIdx);
+  }
+  if (hashIdx >= 0) {
+    hash = _url.slice(hashIdx);
+  }
+
+  resUrl += search?.indexOf("?") >= 0 ? "" : "?";
+  resUrl += search;
+  resUrl += hash;
+
+  return resUrl;
+}
+
+/**
+ * 把对象转为 query 参数
+ * @param query
+ */
+export function objToSearch(query, hasQuery) {
+  if (!query || typeof query !== "object") {
+    console.warn("Warn objToSearch: 请传入正确的对象");
+    return;
+  }
+  let search = hasQuery ? "?" : "";
+  Object.keys(query).forEach((key) => {
+    if (search && search != "?") {
+      search += "&";
+    }
+    search += key;
+    search += "=";
+    search += query[key];
+  });
+  return search;
+}
+
+/**
+ * 修复 query，解决 query 在 hash 后面的情况
+ * @param url
+ * @returns
+ * 源数据：/#/login?a=1&b=2
+ * 结果：/?a=1&b=2#/login
+ */
+export function fixUrlQuery(url) {
+  if (!url || typeof url !== "string") {
+    console.warn("Warn handleUrlQuery: 请传入正确的 url 字符串");
+    return url;
+  }
+  const hashIdx = url.indexOf("#");
+  const queryIdx = url.indexOf("?");
+
+  // 双 query 情况
+  if (queryIdx < hashIdx) {
+    let hash = url.slice(hashIdx);
+    const hashQueryIdx = hash.indexOf("?");
+    if (hashQueryIdx >= 0) {
+      const _url = url.slice(0, queryIdx);
+      const urlQuery = url.slice(queryIdx, hashIdx)?.replace(/\/$/, "");
+      const hashQuery = hash.slice(hashQueryIdx)?.replace("?", "")?.replace(/\/$/, "");
+      hash = hash.slice(0, hashQueryIdx);
+      return `${_url}${urlQuery}&${hashQuery}${hash}`;
+    }
+    return url;
+  }
+
+  // query 在 hash # 之后
+  if (queryIdx >= 0 && hashIdx >= 0 && queryIdx > hashIdx) {
+    const hash = url.slice(hashIdx, queryIdx);
+    const search = url.slice(queryIdx);
+    return `${url.slice(0, hashIdx)}${search}${hash}`;
+  }
+  return url;
+}
+
+/**
+ * 获取 url 中的 query 值的对象
+ * @param query
+ */
+export function searchToObj(url) {
+  if (!url || typeof url !== "string") {
+    console.warn("Warn getSearchParams: 请传入正确的 url 字符串.");
+    return;
+  }
+  let _url = fixUrlQuery(url)
+    // 解决 query 在 /# 之前导致 query 参数多了 / 的问题
+    .replace("/#", "#");
+  const queryIdx = _url.indexOf("?");
+  const hashIdx = _url.indexOf("#");
+  if (queryIdx < 0) {
+    return;
+  }
+  // 去除 hash 相关数据及 query 的 "?"
+  if (hashIdx >= 0 && queryIdx >= 0) {
+    _url = _url.slice(queryIdx + 1, hashIdx);
+  } else if (queryIdx >= 0) {
+    _url = _url.slice(queryIdx + 1);
+  }
+  const res = {};
+  _url.split("&")?.forEach((it) => {
+    const arr = it.split("=");
+    res[arr[0]] = arr[1];
+  });
+  return res;
+}