介绍

在表单功能中，图片，文件上传可以说是非常常见，前端如何快速的传递给后端，通常而言，会直接将 图片/文件地址发送给后端

在这里就需要小伙伴先配置 OSS了，具体的文档请看 配置OSS ,这里就不做多的介绍了（可关闭OSS配置）

为什么要封装呢？

首先这块的功能是比较常见的，比如文件的类型，文件的大小，图片的裁剪，文件的数量，展示的类型等，做了一层封装，以便更好的使用~

这个组件主要使用了 Ant Design 的 Upload 和 react-cropper

为什么不用 antd-img-crop 呢？原因是它不具备自定义裁剪

在线演示：图片文件上传

功能

当你有以下需求时，可以试试这个组件：

  • 需要使用 OSS 将文件转化为网络地址
  • 需要设置上传的大小，类型，是否重复上传等功能
  • 图片需要自定义裁剪的功能~

另外，OSS的功能不方便演示~~~

代码演示

功能演示

基础功能

image.png

其他格式

image.png

图片剪辑

image.png

具体代码

文件位置：src/components/OssUpLoad

全局配置文件：src/utils/Setting/OssUpLoadSy

  1. import React, { useEffect } from 'react';
  2. import { Upload, message, Modal, Button } from 'antd';
  3. import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
  4. import { OssUpLoadSy } from '@/utils/Setting'
  5. import { useState, useRef } from 'react';
  6. import Cropper from 'react-cropper';
  7. import 'cropperjs/dist/cropper.css';
  8. import Props from './interface.d';
  9. import './index.less';
  11. let aliOSS = require('ali-oss');
  12. let client = new aliOSS({
  13.   region: OssUpLoadSy.OSS.region,
  14.   accessKeyId: OssUpLoadSy.OSS.accessKeyId,
  15.   accessKeySecret: OssUpLoadSy.OSS.accessKeySecret,
  16.   bucket: OssUpLoadSy.OSS.bucket,
  17. });
  19. const OssUpLoad: React.FC<Props> = ({
  20.   amount = OssUpLoadSy.amount,
  21.   OSS = OssUpLoadSy.open,
  22.   rules = {},
  23.   listType = OssUpLoadSy.listType,
  24.   onRemove,
  25.   children,
  26.   getFiles,
  27.   crop,
  28.   _config = {},
  29.   button = {},
  30.   initFile = [],
  31.   cropConfig = {},
  32.   ...props
  33. }) => {
  34.   const cropperRef = useRef<any>(null)
  36.   const [fileList, setFileList] = useState<Array<any>>([]); //总文件数组
  37.   const [getFilesList, setGetFilesList] = useState<Array<any>>([]); //总文件数组
  38.   const [previewVisible, setPreviewVisible] = useState<boolean>(false); // 是否打开弹出框
  39.   const [isFileFlag, setIsFileFlag] = useState<boolean>(false); // 控制照片，如果不满足则不添加
  40.   const [previewTitle, setPreviewTitle] = useState<any>(''); // 图片名称
  41.   const [previewImage, setPreviewImage] = useState<any>(''); // 图片展示的数据
  42.   const [src, setSrc] = useState<any>(false) //裁剪图片
  43.   const [file, setFile] = useState<any>(false)
  45.   useEffect(() => {
  46.     if(initFile.length !== 0){
  47.       let fileList: Array<{url: string, name: string, uid?: number | string}> = []
  48.       initFile.map((item, index) => {
  49.         const param = OSS ? { newFile: item } : {}
  50.         if(typeof item === 'string'){
  51.           fileList = [...fileList, { url: item, name: `图片`, ...param}]
  52.         }else {
  53.           fileList = [...fileList, {...item, url: item?.url || '', uid: item?.uid || undefined, name: item?.name || `图片`, ...param}]
  54.         }
  55.       })
  56.       setGetFilesList([...fileList])
  57.       setFileList(fileList)
  58.     }
  59.   }, [])
  61.   // 预览
  62.   const handlePreview = async (file: any) => {
  63.     if (file.type && file.type.indexOf('image') === -1) return;
  64.     if (!file.url && !file.preview) {
  65.       file.preview = await getBase64(file.originFileObj);
  66.     }
  67.     setPreviewVisible(true);
  68.     setPreviewImage(file.url || file.preview);
  69.     setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  70.   };
  72.   // 上传前的操作
  73.   const beforeUpload = async (file: any) => {
  74.     let flag = true; // 控制最终的类型
  76.     // 检测是否有相同类型
  77.     if (!_config.noCheck && flag) {
  78.       const repeat = fileList.filter((item) => item.name === file.name && item.size === file.size);
  79.       if (repeat.length !== 0) {
  80.         message.error('您已上传过此文件，请勿重复上传');
  81.         flag = false;
  82.       }
  83.     }
  85.     // 判断文件类型
  86.     if (typeof rules.type === 'string' && flag) {
  87.       const type = rules.type.trim() === 'jpg' ? 'jpeg' : rules.type.trim();
  89.       if(rules.type === 'xlsx' || rules.type === 'xls') {
  90.         //  单独处理 excel
  91.         const fileType = file.name.split('.').pop();
  92.         if(['xlsx', 'xls'].indexOf(fileType) < 0) {
  93.           message.error(rules.typeMsg || '请上传xlsx或xls格式文件');
  94.           flag = false
  95.         }
  96.       } else if (file.type.indexOf(type) === -1) {
  97.         message.error(rules.typeMsg || '请上传正确的文件类型');
  98.         flag = false;
  99.       }
  100.     } else if (Array.isArray(rules.type) && flag) {
  101.       let allFlag = false;
  102.       rules.type.map((item) => {
  103.         const type = item.trim() === 'jpg' ? 'jpeg' : item.trim();
  104.         if(item  === 'xlsx' || item === 'xls'){
  105.           const fileType = file.name.split('.').pop();
  106.           if(['xlsx', 'xls'].indexOf(fileType) !== -1) {
  107.             allFlag = true
  108.           }
  109.         } else if (file.type.indexOf(type) !== -1) {
  110.           allFlag = true;
  111.           return;
  112.         }
  113.       });
  114.       if (!allFlag) {
  115.         message.error(rules.typeMsg || '请上传正确的文件类型');
  116.         flag = false;
  117.       }
  118.     }
  120.     // 根据listType来进行判断
  121.     if (listType === 'picture-card' && file.type.indexOf('image') === -1 && flag) {
  122.       message.error(_config.pictureCardTip || '请上传正确的图片类型！');
  123.       flag = false;
  124.     }
  126.     // 判断文件大小
  127.     if (rules.size && flag) {
  128.       const fileSize = file.size / 1024 / 1024 < rules.size;
  129.       if (!fileSize) {
  130.         message.error(rules.sizeMsg || `上传文件大于${rules.size}M!请重新上传`);
  131.         flag = false;
  132.       }
  133.     }
  135.     // 裁剪
  136.     if(crop){
  137.       const fileReader = new FileReader()
  138.       fileReader.onload = (e:any) => {
  139.         const dataURL = e.target.result;
  140.         setSrc(dataURL)
  141.       }
  142.       fileReader.readAsDataURL(file)
  143.       setFile(file)
  144.       return;
  145.     }
  147.     if (flag) onGetFiles(file);
  148.     setIsFileFlag(flag);
  149.     return file;
  150.   };
  152.   // 文件获取
  153.   const onGetFiles = async (file: any) => {
  154.     if (getFiles) {
  155.       let result: any = file;
  156.       let OssList: Array<any> = [];
  157.       let fileBase64:any = ''
  158.       if (OSS) {
  159.         const suffix = file.name.slice(file.name.lastIndexOf('.'));
  160.         const filename = _config?.ossText ? _config.ossText + suffix : suffix;
  162.         const res = await client.put(
  163.           `${_config.ossUrl || OssUpLoadSy.OssUrl}/${Date.now() + filename}`,
  164.           file,
  165.         );
  166.         result = res.url;
  167.       }else{
  168.         fileBase64 = await getBase64(file)
  169.       }
  170.       result = [...getFilesList, OSS ? { file, newFile: result } : { file, fileBase64 }];
  171.       OSS ? result.map((item: any) => (OssList = [...OssList, item.newFile])) : '';
  172.       setGetFilesList(result);
  173.       getFiles(OSS ? OssList : result, true);
  174.     }
  175.   };
  177.   // 自定义按钮样式
  178.   const uploadButton = () => {
  179.     if (_config?.uploadNode) {
  180.       return typeof _config.uploadNode === 'function' ? _config.uploadNode() : _config.uploadNode;
  181.     }
  182.     return (
  183.       <div>
  184.         <PlusOutlined />
  185.         <div style={{ marginTop: 8 }}>{_config.text || OssUpLoadSy._config.text}</div>
  186.       </div>
  187.     );
  188.   };
  190.   return (
  191.     <div className="UpLoadComponents">
  192.       <Upload
  193.         {...props}
  194.         listType={listType}
  195.         fileList={fileList}
  196.         onPreview={handlePreview}
  197.         onChange={({ fileList }) => {
  198.           if (isFileFlag) setFileList(fileList);
  199.         }}
  200.         multiple={!_config.radio && amount !== 1}
  201.         onRemove={ (file) => {
  202.           const result = fileList.filter((item) => item.uid !== file.uid);
  203.           setFileList(result);
  204.           if (getFiles) {
  205.             let getFileResult:any = getFilesList.filter((item) => item.file ? item.file.uid !== file.uid : item.uid !== file.uid);
  206.             let OSSList:any = []
  207.             if(OSS && getFileResult.length !== 0) {
  208.               getFileResult.map((item:any) => {
  209.                 OSSList = [...OSSList, item?.newFile]
  210.               })
  211.             }
  212.             setGetFilesList(getFileResult);
  213.             // 删除文件
  214.             getFiles(OSS ? OSSList : getFileResult, false);
  215.           }
  216.           if (onRemove) onRemove(file);
  217.         }}
  218.         beforeUpload={beforeUpload}
  219.         maxCount={amount}
  220.       >
  221.         {listType === 'picture-card' ? (
  222.           fileList.length >= amount ? null : (
  223.             uploadButton()
  224.           )
  225.         ) : children ? (
  226.           children
  227.         ) : (
  228.           <Button
  229.             {...button}
  230.             icon={button.icon || <UploadOutlined />}
  231.             type={button.type || 'primary'}
  232.             disabled={fileList.length === amount}
  233.             onClick={(ev) => {
  234.               if (button.onClick) button.onClick(ev);
  235.             }}
  236.           >
  237.             {_config.text || 'Upload'}
  238.           </Button>
  239.         )}
  240.       </Upload>
  241.       <Modal
  242.         visible={previewVisible}
  243.         title={previewTitle}
  244.         footer={null}
  245.         onCancel={() => setPreviewVisible(false)}
  246.       >
  247.         <img alt="example" style={{ width: '100%' }} src={previewImage} />
  248.       </Modal>
  249.       <Modal
  250.         destroyOnClose
  251.         title={cropConfig?.title || OssUpLoadSy.crop.title}
  252.         visible={src ? true : false}
  253.         style={{height: 200}}
  254.         onCancel={() => {setSrc(false);setFile(false)}}
  255.         footer={null}
  256.       >
  257.         <Cropper
  258.           src={src}
  259.           ref={cropperRef}
  260.           style={{height: 400}}
  261.           zoomable={false}
  262.           guides={false}
  263.         />
  264.         <div style={{marginTop: 30, display: 'flex',justifyContent: 'flex-end'}}>
  265.           <Button onClick={() => setSrc(false)} {...cropConfig?.cancelProps} style={{marginRight: 20, ...OssUpLoadSy.crop.cancelStyle, ...cropConfig?.cancelStyle}}>{cropConfig?.cancelText || OssUpLoadSy.crop.cancelText}</Button>
  266.           <Button
  267.             type="primary"
  268.             {...cropConfig?.cropProps}
  269.             style={{ ...OssUpLoadSy.crop.cropStyle, ...cropConfig?.cropStyle }}
  270.             onClick={async () =>{
  271.               cropperRef?.current?.cropper?.getCroppedCanvas().toBlob(async (blob:any) => {
  272.                 const base64 = await getBase64(blob)
  273.                 const newFile:any = new File([blob], file.name, {type: file.type})
  274.                 newFile.uid = file.uid
  275.                 onGetFiles(newFile)
  276.                 setFileList([...fileList, { url: base64, uid: file.uid, name: file.name}])
  277.                 setFile(false)
  278.               })
  279.               setSrc(false)
  280.             }}
  281.           >{cropConfig?.cropText || OssUpLoadSy.crop.cropText}</Button>
  282.         </div>
  283.     </Modal>
  284.     </div>
  285.   );
  286. };
  288. export default OssUpLoad;
  290. const getBase64 = (file: any) => {
  291.   return new Promise((resolve, reject) => {
  292.     const reader = new FileReader();
  293.     reader.readAsDataURL(file);
  294.     reader.onload = () => resolve(reader.result);
  295.     reader.onerror = (error) => reject(error);
  296.   });
  297. };

如何使用

  1. import { OssUpLoad } from '@/components';
  3. <OssUpLoad
  4.     ...props
  5.     getFiles={(file: Array<any>, flag) => {}} //获取文件
  6. />

结果

开启 OSS的结果
image.png
不开启OSS的结果
image.png

特殊说明

  • 全局配置文件可根据项目的需求去做对应的配置
  • OSSUpLoad 组件本身是单独封装，在表单中的使用需要与 动态表单 结合使用
  • 开启 OSS 功能，返回的则直接是地址的数组，否则有一个文件对象，和Base64的地址
  • 上传的地址都需要使用 **getFiles** 来获取