@hzab/form-render 1.6.6 → 1.6.8

package/CHANGELOG.md

@@ -1,4 +1,9 @@
-# @hzab/form-render@1.6.6
+
+# @hzab/form-render@1.6.8
+
+feat:富文本组件添加私有化部署文件上传与oss上传的区分
+
+# @hzab/form-render@1.6.7
 
 fix: 修复 LocationListPicker 组件在编辑时第一次无法正确渲染的 bug。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/LocationListPicker/index.tsx

@@ -60,8 +60,7 @@ export const LocationListPicker = observer((props) => {
   }, []);
 
   useEffect(() => {
-    listRef.current = value || [];
-    if (!Array.isArray(value) || value?.length == 0 || !mapUtilsRef.current) {
+    if (!Array.isArray(value) || value?.length == 0) {
       return;
     }
     // 处理 id
@@ -70,6 +69,10 @@ export const LocationListPicker = observer((props) => {
         it.id = nanoid();
       }
     });
+    listRef.current = value || [];
+    if (!mapUtilsRef.current) {
+      return;
+    }
     renderMarker();
   }, [value]);
 
@@ -89,6 +92,7 @@ export const LocationListPicker = observer((props) => {
         mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
       }
     });
+    mapUtilsRef.current.setFitView();
     clearActive();
   }
 
@@ -106,7 +110,6 @@ export const LocationListPicker = observer((props) => {
     });
 
     renderMarker();
-    mapUtilsRef.current.setFitView();
   }
 
   function onAddClick() {

package/src/components/RichEditor/index.tsx

@@ -2,7 +2,8 @@ import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import React, { useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editor as WangEditor, Toolbar } from "@wangeditor/editor-for-react";
 import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
-import UploadOss from "./common/ossUpload";
+import { getOssUploadRequest, getOfflineUploadRequest } from "../Upload/common/customRequest";
+import { handlePreviewUrls } from "../Upload/common/OfflineUpload";
 import "./index.less";
 import { Spin, message } from 'antd';
 import { connect, mapProps, observer } from "@formily/react";
@@ -15,11 +16,16 @@ interface PropsType {
   toolbarConfig?: Partial<IToolbarConfig>;
   editorConfig?: Partial<IEditorConfig>;
   ossOpt: AnyObject,
-  params: AnyObject,
+  uploadParams: AnyObject,
   height: string,
+  ossServerUrl: string,
   ossUrl: string,
+  offlinePreviewUrl: string,
+  offlineServerUrl: string,
   value: string,
   onChange: any,
+  customRequest: any,
+  uploadMode: string,
   zIndex: number
 }
 
@@ -31,10 +37,18 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     onChange,
     value,
     ossOpt,
+    uploadMode = "oss",
+    offlinePreviewUrl = "",
+    offlineServerUrl = "",
+    uploadParams = {},
     // ossUrl = "https://test-abt.hzabjt.com:18091/api/v1/user/oss/getWebOssConfig",
+    ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
     ossUrl = "/api/v1/user/oss/getWebOssConfig",
     zIndex = 9999
   } = props;
+  const isPrivateStore =
+    props.uploadParams?.fileAcl === "private" || props.ossOpt?.signatureParams?.fileAcl === "private";
+
   useImperativeHandle(parentRef, () => ({
     setEditorContent,
     getEditorContent,
@@ -57,6 +71,40 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     return html;
   };
 
+
+  const customUpload = async (file: File, insertFn) => {
+    let customRequest = props.customRequest;
+    if (uploadMode === "oss") {
+      customRequest = getOssUploadRequest({
+        ...props,
+        isPrivateStore,
+        params: uploadParams,
+        ossServerUrl: ossServerUrl || ossUrl,
+      });
+    } else if (uploadMode === "offline") {
+      customRequest = getOfflineUploadRequest({
+        ...props,
+        isPrivateStore,
+        params: uploadParams,
+        offlineServerUrl: offlineServerUrl || ossUrl,
+        offlinePreviewUrl: offlinePreviewUrl,
+      });
+    }
+    setIsLoading(true);
+    customRequest({
+      file,
+      onSuccess: (res) => {
+        setIsLoading(false);
+        console.log(res)
+        insertFn(res.url, '', '');
+      },
+      onError: () => {
+        setIsLoading(false);
+        message.error(`${file.name} 上传失败`);
+      }
+    })
+  }
+
   const config: Partial<IEditorConfig> = {
     // TS 语法
     placeholder: "请输入内容...",
@@ -74,19 +122,7 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
         withCredentials: false,
         // 超时时间，默认为 10 秒
         timeout: 5 * 1000, // 5 秒
-        async customUpload(file: File, insertFn) {
-          const ossUpload = new UploadOss({
-            serverUrl: ossUrl,
-            ...ossOpt,
-          });
-          const res = await ossUpload.upload(file, {
-            params: {
-              isPublic: 1,
-              ...(props.params || {}),
-            },
-          })
-          insertFn(res?.data?.data?.fileUrl, '', '')
-        },
+        customUpload,
       },
       uploadVideo: {
         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
@@ -97,30 +133,13 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
         allowedFileTypes: ['video/*'],
         // 跨域是否传递 cookie ，默认为 false
         withCredentials: false,
-        customUpload(file: File, insertFn) {
-          setIsLoading(true)
-          const ossUpload = new UploadOss({
-            serverUrl: ossUrl,
-            ...ossOpt,
-          });
-          ossUpload.upload(file, {
-            params: {
-              isPublic: 1,
-              ...(props.params || {}),
-            },
-          }).then((res) => {
-            setIsLoading(false)
-            insertFn(res?.data?.data?.fileUrl, '', '')
-          }).catch(() => {
-            setIsLoading(false)
-            message.error(`${file.name} 上传失败`);
-          })
-        },
+        customUpload,
       },
     },
     ...editorConfig,
   };
 
+
   const onEditorChange = (e) => {
     const content = e.getHtml();
     setHtml(content);

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

@@ -1,155 +0,0 @@
-import { axios } from "@hzab/data-model";
-import { nanoid } from "nanoid";
-
-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 = axios, params = {}, axiosConf } = opt;
-  return _ax
-    .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.axiosConf = props.axiosConf || {};
-    this.serverUrl = props.serverUrl || "/api/v1/user/oss/getWebOssConfig";
-    this.signatureParams = props.signatureParams || {};
-  }
-
-  getSignature(serverUrl = this.serverUrl, opt) {
-    return getSignature({
-      ...opt,
-      serverUrl,
-      axios: opt?.axios || this.axios,
-      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
-    });
-  }
-
-  upload(file, opt = {}) {
-    return new Promise(async (resolve, reject) => {
-      const ossParams = await this.getSignature(opt.serverUrl || this.serverUrl, {
-        ...opt,
-        params: { ...this.signatureParams, ...opt.signatureParams },
-      });
-
-      const { ossParams: propOssParams } = opt || {};
-      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 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);
-      }
-      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);
-        });
-    });
-  }
-}
-
-/**
- * 处理文件上传逻辑
- * @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({
-    axios: opt.axios,
-    axiosConf: axiosConf,
-    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
-  });
-
-  const promise = [];
-  _files?.forEach((file) => {
-    // 数据已经是 url 的情况
-    if (typeof file === "string" || file.ossUrl) {
-      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, idx) => {
-      _files[idx].ossUrl = fileUrl;
-    });
-    return Promise.resolve(_files);
-  });
-}
-
-export { axios };
-
-export default OssUpload;