前言
在使用Ant Design Vue的upload文件上传功能的时候,我们为了规范前端代码,所以会封装接口请求到对应的ts或js文件并引用,这个时候我们会更多的使用自定义文件上传的功能,像Ant Vue的customRequest通过覆盖默认的上传行为,可以自定义自己的上传实现。但是自定义上传的话设置好的progress进度条会失效,此时需要我们在请求接口的api手动添加onUploadProgress监听方法来动态赋值progress。
onUploadProgress
我们需要在调用api的方法中传入file和onProgress方法,并在axios或者ajax之类的方法内使用,而外部的Upload组件依旧是常规的操作
<a-upload v-model:file-list="fileList" name="file" :customRequest="uploadFile" :accept="fileType" :progress="progress" @change="handleChange" > const progress: UploadProps['progress'] = { strokeColor: { '0%': '#108ee9', '100%': '#87d068', }, strokeWidth: 3, format: percent => `${parseFloat(percent.toFixed(2))}%`, class: 'test', };
通过上述操作就能够完美实现进度条的动态监听啦。
补充:
onUploadProgress监听的是浏览器发送请求到服务器,也就是说把文件发送出去,但是发送到服务器的过程,服务器处理文件的过程,以及服务器返回状态码的过程都不在本次的监听范围内,所以通过控制台可以看到等待服务器的时间会远远高于我们发送请求的时间,这个时候我们就还需要配合onSuccess方法或者res.code==200等情况使用。
原文地址:http://www.cnblogs.com/zxd66666/p/16865365.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性