问答

如何做下载功能?

作者:admin 2021-05-10 我要评论

因为文件挺大的 一个get/post请求往往会超时 一般的下载:点击得到一个链接 用户可以看到下载进度那种 是怎么做的? 后续: 参考 官方例子 算是实现了 但是有一...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

因为文件挺大的
一个get/post请求往往会超时

一般的下载:点击得到一个链接 用户可以看到下载进度那种

是怎么做的?

后续:
参考官方例子

算是实现了
但是有一个新问题
前端用axios来做每次都是等所有数据都下载完了才会返回 而用a标签可以直接打开保存窗口 看到下载进度

如何用axios来实现下载进度呢?

###

由于官方文案https://github.com/eggjs/exam...

只用适用于a标签

所以我的解决方案是:
后端管理一个下载映射:文件和hash
每次用户点击以后,后端返回其他数据和一个唯一hash标记
前端拿到标记 再用a标签去请求如官方文档所诉方法的对应接口来实现下载

浏览器侧的表现是正确响应数据并打开一个保存窗口

###

AJAX 请求有 onprogress 回调啊。

###

下载文件功能,实际上后端有两个动作,第一步是生成文件,第二步是把文件流传给前端。
第二步不会有超时问题,直接交给http和浏览器,http有Content-Length、Range、Content-Range等首部字段,浏览器会帮你实现转圈、显示下载比例等效果。

问题在第一步,会有超时时间限制,假设一次请求超过60s会自动断开,如果60s内不能生成好文件,就504了。可以用websocket长连接保持连接不断开,并且通过ws发送下载进度给前端,前端做进度条。

###

直接用a标签的download属性。如果不是点击a下载,也可以把a隐藏,做其他操作,用js触发a的click事件就可以了

读流,大文件下载,不怕浏览器崩掉么

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • app内的web页面,img路径对,但是不显

    app内的web页面,img路径对,但是不显

  • 如何做下载功能?

    如何做下载功能?

  • 复杂正则表达式,实现思路

    复杂正则表达式,实现思路

  • vue一段简单的代码出现奇怪的问题?

    vue一段简单的代码出现奇怪的问题?

腾讯云代理商
海外云服务器