大文件上传

Web大文件上传方案讨论
https://zhuanlan.zhihu.com/p/315153837

前言

web上传大文件，一直是一个痛点，上传文件大小限制，页面响应时间超时，用户不能刷新页面，否则只能重新上传文件，在网络不稳定的情况下，经常造成上传中断，用户体验极差。

为了提升上传大文件的用户体验，本文给出的解决方案是：前端实现数据流分片上传，后端接受分片文件，最后合并文件。

这个方案的好处是，把大文件分成很多个单独的小块，

第一上传进度更加真实可靠。

第二多个小块可以并发上传，在带宽理想的情况下，上传速度更快

第三省去了网络中断，文件上传失败，必须重新上传的烦恼，由于网络中断前已经上传了部分分片，下次再次上传的时候，可以只上传还没有上传的分片，效率大大提升。

第四可以实现妙传，服务器端记录已经上传过的文件，在上传的时候判断文件是否已经上传过，如果上传过就不用上传，进而实现妙传的功能，用户体验性更好。

第五 还有很多很多好处，不举例子了。

方案实现选择

传统的web应用（指的是基于jquery之类的框架编写的web应用)：推荐百度的web uploader（结果官方不再维护了）

Web Uploaderfex.baidu.com

现代化的基于Vue的web应用：推荐 vue-uploader

https://github.com/simple-uploader/vue-uploadergithub.com

具体实现流程

先占坑，慢慢道来。这里面有很多坑，后续会补上来分享给大家看看。

发布于 2020-11-27

可以读下下面的文章

字节跳面试官，我也实现了大文件上传和断点续传https://zhuanlan.zhihu.com/p/104826733

写给新手前端的各种文件上传攻略，从小图片到大文件断点续传
https://juejin.cn/post/6844903968338870285

重点看：

基于vue-simple-uploader实现分片上传、秒传、断点续传的全局上传插件
https://juejin.cn/post/6861147726277509134

最近做项目有个需求是，用户可以直接上传文件夹。这个跟网页版百度网盘上传文件夹功能一样，通过给 input上传标签添加属性webkitdirectory实现文件夹的上传。But，查看相关Web API文档，webkitdirectory属性并不是所有浏览器都支持。只有Google、Edge、Firefox 50及更高版本中可以使用。

image

实际经过自己测试，Windows环境下，Google、Edge、Firefox 50、360极速、搜狗及更高版本中都可以使用等，IE，360兼容浏览器不可用。具体实现方法如下：

关于webkitdirectory属性的兼容性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory