feat: 增加图片上传组件

.eslintrc.js

@@ -4,5 +4,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 0,
     'import/no-unresolved': 0,
     'prefer-object-spread': 0,
+    '@typescript-eslint/no-shadow': 0,
+    'consistent-return': 0,
   },
 };

.umirc.ts

@@ -33,6 +33,10 @@ export default defineConfig({
           title: '@dream2023/data-mapping 数据映射',
           path: 'https://gitee.com/dream2023/data-mapping',
         },
+        {
+          title: 'antd-image-cropper 图片裁剪组件',
+          path: 'https://github.com/dream2023/antd-image-cropper',
+        },
       ],
     },
     null,

README.md

@@ -49,9 +49,9 @@
   - [x] 完成 100% 文档
   - [x] 0️⃣ issue
 - [ ] 1.0 版
+  - [x] 上传图片组件
   - [ ] 模板组件
   - [ ] 富文本组件
-  - [ ] 上传图片组件
   - [ ] 上传视频组件
   - [ ] 代码编辑器组件
   - [ ] ...
@@ -65,6 +65,7 @@
 | Project | Status | Description |
 | --- | --- | --- |
 | react-schema-render | ![react-schema-render](https://img.shields.io/npm/v/react-schema-render?style=flat-square) | 通用型 schema 转 React 组件的工具组件 |
+| antd-image-cropper | ![antd-image-cropper](https://img.shields.io/npm/v/antd-image-cropper?style=flat-square) | ant design 图片裁剪组件 |
 | @dream2023/data-mapping | ![@dream2023/data-mapping](https://img.shields.io/npm/v/@dream2023/data-mapping?style=flat-square) | 数据模板映射方案 |
 | super-antd | ![super-antd](https://img.shields.io/npm/v/super-antd?style=flat-square) | 简单且数据驱动友好的 React 组件库 |
 

cspell.json

@@ -20,6 +20,7 @@
     "globby",
     "gitee",
     "Codecov",
+    "anticon",
     "browserslist"
   ],
   "ignorePaths": ["node_modules/**", "**/*.snap", "coverage/**", "src/.umi/**"]

docs/components/form/__demos__/form-components/all.tsx

@@ -14,6 +14,7 @@ import {
   SuperEmail,
   SuperForm,
   SuperGroup,
+  SuperImageUploader,
   SuperInput,
   SuperMonth,
   SuperNumber,
@@ -189,6 +190,7 @@ const App = () => {
           <SuperUploadDragger label="Dragger" name="dragger" action="upload.do" />
         </SuperGroup>
         <SuperGroup label="其他">
+          <SuperImageUploader name="image-uploader" label="SuperImageUploader" />
           <SuperRate name="rate" label="SuperRate" />
           <SuperColor name="color" label="SuperColor" />
           <SuperSlider name="slider" label="SuperSlider" />

docs/components/form/__demos__/image-uploader/accept.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader name="avatar" label="头像" accept=".jpeg,.jpg,.png" />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/axios-instance.ts

@@ -0,0 +1,39 @@
+// 引入 axios
+import axios from 'axios';
+
+// 创建新的 axios 实例
+const instance = axios.create({
+  baseURL: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/',
+});
+
+// 创建相应拦截器
+instance.interceptors.response.use(
+  function ({ status, data: { code, message, data } }) {
+    // 如果响应结果是 200 且 code 为 0 ，则代表请求成功
+    if (status === 200 && code === 0) {
+      // 直接返回请求数据，取出响应结果里的 data 数据
+      return data;
+    }
+
+    // 否则是请求失败
+    // 请求失败有两种返回结果
+    // 第一种返回结果是 string 类型，代表错误信息
+    // return Promise.reject(msg);
+
+    // 表单错误回显
+    // 第二种返回结果是 object 类型，代表其中 message 代表错误信息，errors 代表错误的详细解释
+    // 这种情况主要是应对表单服务器校检回显
+    return Promise.reject({
+      message,
+      errors: data,
+    });
+  },
+  function (error) {
+    // 一般是跨域或者网络错误
+    // 我们可以直接返回 error，内部会自动获取 error.message 属性
+    return Promise.reject(error);
+  },
+);
+
+// 导出
+export default instance;

docs/components/form/__demos__/image-uploader/back.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm
+      debug
+      initialValues={{
+        posts: [
+          { img: 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg', id: '1' },
+          { img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', id: '2' },
+        ],
+      }}
+    >
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader name="posts" label="海报" uidKey="id" urlKey="img" />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/base.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput } from 'super-antd';
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <SuperImageUploader
+        action="https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload"
+        name="avatar"
+        label="头像"
+        formatter={(response) => {
+          return response.url;
+        }}
+      />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/crop.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader name="avatar" label="头像" crop limit={{ aspectRatio: 4 / 3, maxHeight: 500, minWidth: 100 }} />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/dataApi.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, SuperProvider, withDefaultProps } from 'super-antd';
+
+import axiosInstance from './axios-instance';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  // action: 'https://xxxx.oss-cn-beijing.aliyuncs.com/', // 应该是阿里 OSS 上传地址
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  dataApi: '/ali/oss',
+  formatter: (response, file, data) => {
+    // 应该返回 oss 域名 + key
+    // return 'https://xxxx.oss-cn-beijing.aliyuncs.com/' + data.key
+    // 这里为了不报错，就随便返回一张图片了，大家明白就行
+    return 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+  },
+});
+
+const Demo = () => {
+  return (
+    <SuperProvider axios={axiosInstance}>
+      <SuperForm debug>
+        <SuperInput name="name" label="姓名" />
+        <MyImageUploader name="avatar" label="头像" />
+      </SuperForm>
+    </SuperProvider>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/formatter.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader name="avatar" label="头像" />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/limit.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader
+        name="avatar"
+        label="头像"
+        limit={{
+          aspectRatio: 1 / 2,
+          minWidth: 100,
+          maxWidth: 500,
+          minHeight: 200,
+          maxHeight: 1000,
+        }}
+      />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/maxCount.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+let index = 0;
+
+const images = [
+  'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  'https://scpic.chinaz.net/files/pic/pic9/202106/bpic23310.jpg',
+];
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => images[index++],
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader name="avatar" label="头像" maxCount={2} />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/maxSize.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader name="avatar" label="头像" maxSize={10} />
+    </SuperForm>
+  );
+};
+
+export default Demo;

docs/components/form/__demos__/image-uploader/previewLimit.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { SuperForm, SuperImageUploader, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyImageUploader = withDefaultProps(SuperImageUploader, {
+  action: 'https://www.fastmock.site/mock/32d872e565fbab87ba76057c18f7f8e0/api/upload',
+  formatter: (response) => response.url,
+});
+
+const Demo = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyImageUploader
+        name="avatar"
+        label="头像"
+        previewLimit={{
+          width: 150,
+          height: 180,
+        }}
+      />
+    </SuperForm>
+  );
+};
+
+export default Demo;