@fe-free/core 3.0.15 → 3.0.16

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 3.0.16
+
+### Patch Changes
+
+- feat: upload
+  - @fe-free/tool@3.0.16
+
 ## 3.0.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.15",
+  "version": "3.0.16",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.15"
+    "@fe-free/tool": "3.0.16"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/form/form.stories.tsx

@@ -210,7 +210,7 @@ function customRequest(option: any) {
         },
       });
     }
-  }, 100);
+  }, 1000);
 
   // 返回 abort 方法，用于取消上传
   return {
@@ -239,6 +239,29 @@ export const ProFormUploadComponent: Story = {
         name="files_dragger"
         fieldProps={{ multiple: true, maxCount: 2, customRequest }}
       />
+      <ProFormUploadDragger
+        label="knowledge_files_dragger"
+        name="knowledge_files_dragger"
+        fieldProps={{
+          accept: '.doc,.docx,.pdf,.ppt,.jpg, jpeg,.png,.mp3,.mp4,.txt,.markdown,.excel',
+          multiple: true,
+          maxCount: 100,
+          customRequest,
+          showStatus: true,
+          description: (
+            <div>
+              <div className="text-01">
+                支持doc、docx、pdf、ppt、jpg、png、mp3、mp4、txt、markdown、excel格式文件
+              </div>
+              <div className="text-03">
+                pdf
+                文件不超过100MiB、图片文件不超过10MiB、音频文件不超过300MiB、视频文件不超过400MiB
+                其他单文件不超过50MiB 单次最多上传 100 个文件
+              </div>
+            </div>
+          ),
+        }}
+      />
       <ProFormUpload
         label="files"
         name="files"

package/src/form/pro_form_upload.tsx

@@ -1,5 +1,7 @@
 // 避免循环引用
 import { ProForm, type ProFormItemProps } from '@ant-design/pro-components';
+import { App } from 'antd';
+import { useState } from 'react';
 import type {
   AvatarImageUploadProps,
   ImageUploadDraggerProps,
@@ -27,9 +29,38 @@ function ProFormUpload(props: ProFormItemProps<UploadProps>) {
 
 function ProFormUploadDragger(props: ProFormItemProps<UploadDraggerProps>) {
   const { fieldProps, ...rest } = props;
+  const { message } = App.useApp();
+
+  const [info, setInfo] = useState<any>(undefined);
+
+  const successList = info?.fileList
+    ?.map((item) => item.url || item.response?.data.url)
+    .filter(Boolean);
+
   return (
-    <ProForm.Item {...rest}>
-      <UploadDragger {...fieldProps} />
+    <ProForm.Item
+      {...rest}
+      validateTrigger={['onSubmit']}
+      rules={[
+        ...(props.rules || []),
+        {
+          validator: () => {
+            if (successList?.length !== info?.fileList?.length) {
+              message.error('存在未成功的文件，请处理！');
+              return Promise.reject('');
+            }
+            return Promise.resolve();
+          },
+        },
+      ]}
+    >
+      <UploadDragger
+        {...fieldProps}
+        onChangeOriginal={(info) => {
+          setInfo(info);
+          fieldProps?.onChangeOriginal?.(info);
+        }}
+      />
     </ProForm.Item>
   );
 }

package/src/upload/index.tsx

@@ -1,9 +1,11 @@
-// 避免循环引用
 import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
 import { Upload as AntdUpload, Avatar, Button, message } from 'antd';
+import type { UploadChangeParam } from 'antd/es/upload';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
+import './style.scss';
 
 interface UploadBaseProps {
   value?: string[] | string;
@@ -20,8 +22,10 @@ interface UploadProps extends UploadBaseProps {
   showCount?: boolean;
 }
 
-function useUpload(props: ImageUploadProps) {
-  const { value, onChange, multiple, maxCount } = props;
+function useUpload(
+  props: ImageUploadProps & { onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void },
+) {
+  const { value, onChange, multiple, maxCount, onChangeOriginal } = props;
   // 转换成 Upload 格式。
   const defaultFileList = useMemo(() => {
     if (!value) {
@@ -35,6 +39,9 @@ function useUpload(props: ImageUploadProps) {
   // 存起来，已选的文件。以便做一些判断。
   const [fileList, setFileList] = useState<UploadFile[]>(defaultFileList);
 
+  // 找到真正上传成功的。
+  const successList = fileList.map((item) => item.url || item.response?.data.url).filter(Boolean);
+
   const handleChange = useCallback(
     (info) => {
       setFileList(info.fileList);
@@ -45,8 +52,10 @@ function useUpload(props: ImageUploadProps) {
         .filter(Boolean);
 
       onChange?.(multiple ? newValue : newValue[0]);
+
+      onChangeOriginal?.(info);
     },
-    [multiple, onChange],
+    [multiple, onChange, onChangeOriginal],
   );
 
   // 选文件还是可能多选，如果多选，则提示。
@@ -78,6 +87,7 @@ function useUpload(props: ImageUploadProps) {
     beforeUpload: handleBeforeUpload,
     isDisabled,
     fileList,
+    successList,
   };
 }
 
@@ -115,11 +125,43 @@ function Upload(props: ImageUploadProps) {
 
 interface UploadDraggerProps extends UploadBaseProps {
   title?: string;
-  description?: string;
+  description?: string | ReactNode;
+  onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void;
+  showStatus?: boolean;
 }
 function UploadDragger(props: UploadDraggerProps) {
-  const { multiple, maxCount, action, customRequest, listType, accept, title, description } = props;
-  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+  const {
+    multiple,
+    maxCount,
+    action,
+    customRequest,
+    listType,
+    accept,
+    title,
+    description,
+    showStatus,
+  } = props;
+  const { onChange, beforeUpload, isDisabled, fileList, successList } = useUpload(props);
+
+  const itemRender = useCallback(
+    (originNode, file, fileList) => {
+      const isFirst = fileList.findIndex((item) => item.uid === file.uid) === 0;
+
+      if (maxCount && maxCount > 1 && showStatus && isFirst) {
+        return (
+          <div>
+            <div className="py-1">
+              文件数量 ({successList.length}/{fileList.length})
+            </div>
+            {originNode}
+          </div>
+        );
+      }
+
+      return originNode;
+    },
+    [maxCount, showStatus, successList.length],
+  );
 
   return (
     <AntdUpload.Dragger
@@ -134,6 +176,10 @@ function UploadDragger(props: UploadDraggerProps) {
       beforeUpload={beforeUpload}
       // 不可，否则会没法删除
       // disabled={isDisabled}
+      className={classNames('fec-upload-dragger', {
+        'fec-upload-dragger-count-ten': fileList.length >= 10,
+      })}
+      itemRender={itemRender}
     >
       <div
         className={classNames({

package/src/upload/style.scss

@@ -0,0 +1,8 @@
+.fec-upload-dragger {
+  &.fec-upload-dragger-count-ten {
+    .ant-upload-list.ant-upload-list-text {
+      max-height: calc(10 * 30px);
+      overflow: auto;
+    }
+  }
+}