本文已参与「新人创作礼」活动，一起开启掘金创作之路。
介绍
在工作中，常常会有各种各样的表单需要处理，除去样式，逻辑等外界因素，本菜鸟觉得 上传文件的组件最为麻烦，如果将这个组件处理好了，是不是就能大大减少了开发时间，有更多的时间去摸鱼了？
我是一个励志当摸鱼的小前端，当然是先将工作处理完成后，所以打算搞搞，这样就能光明正大的摸鱼了~~
关于文件上传，相信绝大多数同学都不陌生，由于我是蚂蚁的铁粉，所以封装的组件是 Ant Design 的 Upload
在 Upload 众多的功能中，我觉得最值得吐槽的一个点就是： 裁剪功能
我们看看官方的裁剪
说实话这个裁剪真的很鸡肋，因为无法根据裁剪的区域，只能跟据图片的放大缩小旋转来控制裁剪区域，这很糟心~
所以本文主要是以解决这个问题所进行的封装，并整合一些小功能，使这个组件更加完善(●￣(ｴ)￣●)
功能介绍
当你需要OSS、图片自定义裁剪，文件类型，文件大小，是否检测同一个文件的功能等能时，你可以尝试使用此组件，帮你快速构建👏🏻👏🏻👏🏻
先贴一张图片裁剪完成后的样子：
在线示例：Domesy/OssUpload
gitHub地址：Domesy/Ant-Design-Pro-V5
还请各位小伙伴给个 Star，支持一下吧，Thanks♪(･ω･)ﾉ
OssUpload
为了能实现自定义裁剪，需要使用 Upload 并结合 react-cropper 进行封装
oss
通常在表单的传输方面，当你需要保存这个图片的时候建议开启 OSS，他会直接返回一个网络地址，可以说非常方便，这里就不详细介绍如何配置OSS了，具体的文档可看：配置OSS
当配置好后我们需要拿到这4个参数
- region：源地址
- accessKeyId：接口验权时掉的，需要从阿里云官网控制台获取
- accessKeySecret：接口验权时掉的，需要从阿里云官网控制台获取
- bucket：名称,具备唯一性
beforeUpload
我们进行的一切封装基本上都是在 Upload 组件的 beforUpload 进行判断
当我们开启裁剪功能的时候，只需要配合弹框组件即可，同时可以对弹框内的其他样式进行修改等，如
这样就能实现一个裁剪功能
同时，我们可以根据这个方法可以在上传判断 文件类型、文件大小、是否上传了相同的文件等操作，让组建更加完善。
这里附上我封装后的一些样例：
结果
这里的结果将会以数组的形式返回给我们，主要分为开启OSS和不开启OSS的形式
开启OSS：直接返回对应的地址
未开启OSS：会返回 file文件的相关实例和图片Base64的形式
其他
- 默认图片可以值传入 string[] 为链接地址，这是预览时的弹框名称为固定的图片，如果要传入对象，则参照 Upload 默认值的传入，如
initFile={
[
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
{
name: '图片标签',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
status: 'done'
}
]
}
- 当设置一张图片，采用单选设置，多张图片采用多选图片模式，当然，假设只允许上传2张，而你多选的时候上传了3张，那么则会取2张的照片
- 如果你选了 type 为 png，那么只允许 png图片上传，其他格式不允许上传
- 文件大小限制： 这里的限制的单位是 M
- 主要有三种模式，分别是 text picture picture-card，其中 picture-card 模式只能上传图片
- text 和 picture 模式 可以设定 children， 自定义的模式，如果没有的话则是，一个默认的按钮
如何使用
这里就不贴组件是怎么写的了，怕被喷(●￣(ｴ)￣●),就讲讲如何使用的~
import { OssUpLoad } from '@/components';
<OssUpLoad
amount={3} // 限制张数
initFile=[...] //默认图片
crop //裁剪功能
OSS // 开启OSS
rules: {..} //设置上传的规则，大小等
getFiles={(file: Array<any>, flag) => {}} //获取文件
...props
/>
最后
致此一个简单的图片文件上传组件就制作完成了，最后要注意一点，这个组件需要 getFiles 来获取对应的结果，希望这个组件能够帮助解决项目上的功能
助各位🐯年 🐯🐯生威，在新的一年中更好的摸鱼，不，更好的工作(●￣(ｴ)￣●)
