Web大文件上传方案讨论
https://zhuanlan.zhihu.com/p/315153837
前言
web上传大文件，一直是一个痛点，上传文件大小限制，页面响应时间超时，用户不能刷新页面，否则只能重新上传文件，在网络不稳定的情况下，经常造成上传中断，用户体验极差。
为了提升上传大文件的用户体验，本文给出的解决方案是：前端实现数据流分片上传，后端接受分片文件，最后合并文件。
这个方案的好处是，把大文件分成很多个单独的小块，
第一上传进度更加真实可靠。
第二多个小块可以并发上传，在带宽理想的情况下，上传速度更快
第三省去了网络中断，文件上传失败，必须重新上传的烦恼，由于网络中断前已经上传了部分分片，下次再次上传的时候，可以只上传还没有上传的分片，效率大大提升。
第四可以实现妙传，服务器端记录已经上传过的文件，在上传的时候判断文件是否已经上传过，如果上传过就不用上传，进而实现妙传的功能，用户体验性更好。
第五 还有很多很多好处，不举例子了。
方案实现选择
传统的web应用（指的是基于jquery之类的框架编写的web应用)：推荐百度的web uploader（结果官方不再维护了）
现代化的基于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
网友评论