feat: 添加 自定义 Upload 组件

src/pages/member/components/QualificationUploadFormItem/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-01 16:13:35
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-01 18:05:56
+ * @LastEditTime: 2021-06-04 18:56:22
  * @Description: 资质证明上传组件
  */
 import React from 'react';
@@ -28,18 +28,17 @@ const schema = new Schema({
       properties: {
         file: {
           type: 'string',
-          'x-component': 'FixUpload',
+          'x-component': 'QualificationUpload',
           'x-component-props': {
-            maxCount: 1,
             action: '/api/file/file/upload/prefix',
             data: {
               fileType: UPLOAD_TYPE,
               prefix: 'member_qualifications_',
             },
-            accept: '.doc, .docx, .xls, .xlsx, .pot, .pps, .vsd, .wps, .dps, .pdf, .txt, .png, .jpg, .rar, .zip', 
+            accept: '.doc, .docx, .xls, .xlsx, .pot, .pps, .vsd, .wps, .dps, .pdf, .txt, .png, .jpg, .rar, .zip',
           },
         },
-        MEGA_LAYOUT1: {
+        MEGA_LAYOUT2: {
           type: 'object',
           'x-component': 'Mega-Layout',
           properties: {

src/pages/member/components/QualitiesUpload/index.less

+.upload {
+  :global {
+    .ant-upload.ant-upload-select-picture-card {
+      width: 175px;
+      height: 120px;
+    }
+  }
+
+  .img {
+    width: 175px;
+    height: 120px;
+    object-fit: contain;
+  }
+}
\ No newline at end of file

src/pages/member/components/QualitiesUpload/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-04 17:26:51
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-04 18:52:50
+ * @Description: 资质上传组件
+ */
+import React from 'react';
+import { Upload } from 'antd';
+import { PlusOutlined, FileOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import styles from './index.less';
+
+const QualitiesUpload = (props) => {
+  const {
+    value,
+    className,
+    editable,
+    path,
+    mutators,
+    // schema,
+  } = props;
+
+  const arrValue = value ? [value] : [];
+
+  const handleChange = (info: UploadChangeParam) => {
+    const { file } = info;
+    const { response = {}, ...rest } = file;
+    mutators.change({
+      ...rest,
+      ...(response.data || {}),
+    });
+  };
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>上传</div>
+    </div>
+  );
+
+  const renderFile = () => {
+    const url = value?.url || '';
+    const imgReg = /\.(png|jpg|gif|jpeg|webp)$/;
+    const isImg = imgReg.test(url);
+
+    if (!url) {
+      return <div />;
+    }
+    
+    if (isImg) {
+      return (
+        <img src={url} className={styles.img} />
+      )
+    }
+
+    return (
+      <FileOutlined style={{ fontSize: 36 }} />
+    );
+  };
+
+  return (
+    <div className={styles.upload}>
+      <Upload
+        {...(props.props['x-component-props'] || {})}
+        listType="picture-card"
+        showUploadList={false}
+        maxCount={1}
+        fileList={arrValue}
+        onChange={handleChange}
+      >
+        {arrValue.length ? renderFile() : uploadButton}
+      </Upload>
+    </div>
+  );
+};
+
+QualitiesUpload.isFieldComponent = true;
+
+export default QualitiesUpload;

src/pages/member/memberPrVerifyComingData/components/UploadQualificationsDrawer/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-01 20:03:23
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-02 10:47:20
+ * @LastEditTime: 2021-06-04 17:33:30
  * @Description: 补充资质证明抽屉
  */
 import React from 'react';
@@ -13,9 +13,10 @@ import {
 import {
   createFormActions,
 } from '@formily/antd';
-import { DatePicker } from '@formily/antd-components'
+import { DatePicker, Checkbox } from '@formily/antd-components'
 import NiceForm from '@/components/NiceForm';
 import { schema } from './schema';
+import QualificationUpload from '../../../components/QualitiesUpload';
 import QualificationUploadFormItem from '../../../components/QualificationUploadFormItem';
 
 export type FileType = {
@@ -117,6 +118,9 @@ const UploadQualificationsDrawer: React.FC<IProps> = (props: IProps) => {
         previewPlaceholder="' '"
         components={{
           DatePicker,
+          Checkbox,
+          CheckboxGroup: Checkbox.Group,
+          QualificationUpload,
           QualificationUploadFormItem,
         }}
         effects={() => {