React:使用AntDesign中的Upload组件实现文件上传功能

上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。

实现效果

React:使用AntDesign中的Upload组件实现文件上传功能_第1张图片

在这里插入图片描述

实现说明

1、fileList 用于上传的文件列表(这个是受控的)。
2、multiple 这个属性是用于是否支持多选文件,开启后按住 ctrl 可选择多个文件,ie10+ 支持。
React:使用AntDesign中的Upload组件实现文件上传功能_第2张图片
3、onChange 通过此方法可以用于上传文件改变时的状态。
在这里插入图片描述
4、onRemove 用于点击移除文件时的回调,返回值为 false 时不移除。
React:使用AntDesign中的Upload组件实现文件上传功能_第3张图片
5、customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现。这个可以根据自己的实际情况考虑需不需要,因为我此次并不需要使用,所以就设为false,建议在使用的时候酌情考虑。

6、beforeUpload 上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。通常在此处可以进行文件格式、大小进行校验。
React:使用AntDesign中的Upload组件实现文件上传功能_第4张图片
React:使用AntDesign中的Upload组件实现文件上传功能_第5张图片
React:使用AntDesign中的Upload组件实现文件上传功能_第6张图片
到此,整个上传功能算是完成了,但是这个只是一个上传的思路或者说思想,如果需求出现变更,那么对应的写法也需要处理。比如说此次只是单独进行一个文件上传然后再处理表单其他信息,分布提交判断,那么一个上传文件功能只是一个独立模块,表单内其他填写信息是另一个方法只是要在表单提交的时候进行一下文件上传与否的判断校验。如果需要将表单与上传文件这个功能进行同步处理,用一个接口完成,那么写法肯定也会有所不同,但是也不会有太多的差别,具体怎么去实现以及怎么写还是需要考虑需求。

你可能感兴趣的:(react,前端,reactjs,前端)