vue前端下载阿里oss超大文件的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue前端下载阿里oss超大文件的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在开发一个大文件压缩下载需求，由于附件都是从阿里oss上下载，且一次下载多个文件，然后进行打包压缩，前期使用了axios+jszip+file-saver 来进行处理，但是当文件超过3个G的时候会出现out of memory和RangeError: Array buffer allocation failed错误。 vue 大文件下载,前端,vue.js,javascript

下面贴出代码：

vue 大文件下载,前端,vue.js,javascript

后面尝试使用streamsaver+fetch下载大文件

使用常用的 axios 进行下载时，会遇到以下一些问题：

超时问题：如果下载的文件较大或网络连接较慢，可能会导致请求超时。
内存问题：如果下载的文件非常大，将整个文件存储在内存中可能会导致内存溢出，下载的文件会出现截断或损坏。
进度跟踪问题：axios 默认不提供下载进度的功能。需要使用 axios-progress-bar 等第三方库来实现下载进度的监控和显示。
下载文件时，需要等待整个文件流都下载到内存中才会弹出浏览器的下载文件保存对话框，用户体验较差。

使用Fetch下载相比Axios在文件下载方面的一些优势：

原生支持：Fetch是浏览器原生提供的API，不需要额外的第三方库或依赖。这意味着在现代浏览器中，无需额外配置即可直接使用Fetch进行文件下载。
内置的流支持：Fetch使用ReadableStream对象处理响应数据，这使得在下载大文件时能够有效地处理数据流，减少内存占用。相比之下，Axios默认将整个响应加载到内存中，对于大文件下载可能会导致内存问题。
下载响应开始就可以弹出浏览器下载保存对话框，并且不影响文件流下载，而axios需要等待整个文件流都下载到内存中才会弹出浏览器的下载文件保存对话框