ant design Upload组件的使用总结

   日期:2024-12-27    作者:hprbr 移动:http://3jjewl.riyuangf.com/mobile/quote/64996.html

事先说明:upload 所使用"rc-upload"组件在npm是有单独的包,upload对其进一步封装。"rc-upload"

ant design Upload组件的使用总结

有更多的API选择。

要求限制上传图片的格式、大小、分辨率。

这是一个最简单的upload组件使用


简单说一下关键几个参数

参数 作用 action 上传的服务器地址,使用默认上传行为必填 beforeUpload 默认上传行为之前的钩子函数,用来限制上传文件 customRequest 自定义上传(本文关键) fileList 已上传列表

本文的关键就在于customRequest、fileList和onRemove三个api。

该组件已经将上传文件封装的及其简单


在所有提供的钩子函数都会接受file参数。它就是用户上传文件的RcFile形式。

主要参数有


在beforeUpload调用file的type和size来限制上传文件。beforeUpload如果返回false就是取消上传行为。

来至官网的示例


当文件开始上传的时候,这时候调用onChange 读取到file.response获取到服务端的回调,来实现我们的功能。

  1. 显然默认的行为不能实现我的要求,file对象并没有分辨率的参数。我所采用的是把上传的图片实例化读取它的高宽。这样出现一个问题。image只有在触发load事件之后才能被读取宽高,我们没有办法将我们的判断传递给beforeUpload,也就阻止不了上传事件。

所有只能使用customRequest来覆盖默认上传。但这样有两个弊端。

  1. 上传状态无法被onChange捕获。

  2. 我们需要自己控制fileList。

  3. 组件showUploadList会出现我们不想展示的图片。

其实到这一步已经可以实现效果,但是我想要组件的showUploadList所展示的上传列表,毕竟别人已经写好动画了。

所有我们要控制fileList于state绑定,初始值设为[],上传成功后fileList增加新的元素。


设置的fileList是安装官方defaultFileList 的形式添加的



使用了showUploadList就需要使用onRemove来删除文件列表元素。我们先看看onRemove的介绍

点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除

由于同时涉及到表单我也用了Form组件,同样也要使用Form组件的表单验证。


图片是删除里但是并没有触发Form的验证。Form都是靠表单的onChange来触发的。所有查了一下源码。


其中的 removeFileItem 如下


可以看出之前fileList已被我们设为[],removeFileItem 返回为null,所以没有触发onChange。没办法,我们只能自己触发了,传入参数上面的代码已给出。


至此我个人所有需求全部解决。但是我在逛github的Issues 的时候发现有人提这样无法获取上传的进度。

ajax是有原生获取上传文件进度的方法的。我使用的是axios的onUploadProgress方法。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号