WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
和平常开发一样，需要阅读官方文档，这里跳过基本使用介绍，直接介绍如何实现断点续传。说到底，断点续传是分片上传于暂停上传的结合，一个大文件上传时可能会很耗时，如果上传前检测服务器中是否存在该文件即可跳过上传，同时上传时把大文件分割成若干个分片，一片片的上传，这样用户就可以随时暂停上传，如果网络不好，还可以去到网速好的地方上传。
在介绍正式代码前先说明一下，webuploader插件和jq插件是必须要引用的，其次整体开发框架为vue.js，如果对vue.js不熟悉，其实影响不大，毕竟vue.js只是一种实现方式，万变不离其宗，其他的也可以实现。
1、下载并引用webuploader.js
github或者官网下载
2、下载并引用jquery.js(版本需大于1.9)
是的，之前千叮万嘱vue中不要引入jq这里是引入了，因为webuploader是依赖于jq，虽然说可以改它的底层，可是懒~~~
3、开发Vue组件页面
在页面上放置一个选择文件的按钮，当选中文件后再点击上传按钮即可完成上传，上传后显示上传信息
选择文件前
选择文件后
上传过程中
上传过程中
上传完成后
样式可以根据需求自定义开发，下面是简要代码
放置一个div来作为webuploader的入口，然后js根据id去实例化插件（picker为js生成的随机字符串）
4、webuploader实例化
在页面构建完后实例化webuploader
其中里面的server为接受分片文件的路径，同时把多文件上传屏蔽了（因为多文件分片会比较乱，开发难度加大了点），然后chunked代表开启分片，chunkSize表示每一个分片的大小为5M
5、开发webuploader的钩子函数
钩子函数
不了解钩子函数是什么的可以看我之前的文章
6、秒传逻辑
如果开启秒传，那么先把整个文件的md5算出来（100M大约5秒），算完后再去查询数据库，看有没有对应的记录，存在记录即可完成秒传
这里要特别注意var deferred = WebUploader.Base.Deferred();
可以理解成在这里等待异步执行完成，当reject()或者resolve()后再继续往下执行，类似于与同步执行
7、分片逻辑
每一个分片都会执行这里的代码，先计算该分片的md5，然后发送给后台判断分片是否存在，存在就跳过分片，不存在就继续上传（这里用到promise语法）
8、合并分片逻辑
当分片都上传完成了，触发上传成功钩子，然后再根据相关路径去合并分片成一个完成的文件
9、服务端代码
百度云：https://pan.baidu.com/s/1YHMgXRLsXDYKWG5KbN-VGw，密码：um6a
网友评论