这篇文章主要介绍了web前端大文件上传与下载问题怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇web前端大文件上传与下载问题怎么解决文章都会有所收获，下面我们一起来看看吧。日常业务中难免出现前端需要向后端传输大型文件的情况，这时单次的请求不能满足传输大文件的需求，就需要用到分片上传业务需求为：用户可以上传小于20G的镜像文件，并进显示当前上传进度前端：vue3.x+Element Plus组件+axios解决思路简单为前端选择文件后读取到文件的基本信息，包括：文件的大小、文件格式等信息，用于前端校验，校验完成后将文件进行切片并通过请求轮询把切片传递给后端Vue的元素代码如下，主要借助el-upload组件：配合组件选取需要上传的文件这一步可以根据需求来进行校验，这里需要通过接口校验当前服务器可用的磁盘容量来判断是否有足够的空间用于存放将要上传的文件校验完成后就可以进行文件的切片上传了，这里用的类似接口轮询的方式，每次携带一个切片信息给后端，后端接受到切片并返回成功状态码后再进行下一次切片的上传，代码如下：当然这里后端没有过多的做切片的处理，可以通过前端使用多线程，或者不等接口响应成功就进行下一次传递切片的过程进行上传的提速，这里具体怎么实现看业务需求或者怎么配合上传最后将1、2、3中的代码合起来就是完整的分片上传了（前端带有文件校验）首先就是需要配置一下Nginx，我这里的每一个切片文件的大小为5MB，但是上传第一片的时候会报413的状态码，因为Nginx默认上传文件的大小是1M，所以叫运维或者后端同学改一下配置参数，保证文件传输时不会受到服务器的限制这里简单说一下业务中遇到的大文件下载，上述镜像文件上传之后是支持用户下载的，所以怎样处理20G文件的下载也是需要考虑的，我与后端小伙伴尝试过通过range推流的方式来处理大文件的下载，当下载时除了控制台能看到后一直在推流过来免费云主机域名，界面上不会出现下载进度的窗口，而且当文件大小超过2G时会出现浏览器缓存不足导致推流的中断，这里没有系统研究具体原因解决方法是后端直接将文件所存的地址返回给我，当然也可以通过Nginx配置访问到文件存储的位置也可以，前端则通过创建a标签的方式进行下载，这样可以直接调用到浏览器自带的下载直接显示出来当前文件下载的相关信息：下载进度、传输的速率和文件大小，用户体验更好，代码如下：关于“web前端大文件上传与下载问题怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“web前端大文件上传与下载问题怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。
相关推荐: 基于angular material theming机制如何修改mat-toolbar的背景色
本文小编为大家详细介绍“基于angularmaterialtheming机制如何修改mat-toolbar的背景色”，内容详细，步骤清晰，细节处理妥当，希望这篇“基于angularmaterialtheming机制如何修改mat-toolbar的背景色”文章能…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
