Vue2.0结合webuploader实现文件分片上传功能

前端之家收集整理的这篇文章主要介绍了Vue2.0结合webuploader实现文件分片上传功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽。

上传上传吧,为什么搞得那么麻烦,用分片上传

分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件上传速度。

当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

实现后的界面:

主要是两个文件,封装的上传组件和具体的ui页面上传组件代码下面有列出来。这两个页面代码放到github上了:

在项目中引入webuploader

1.先在系统中引入jquery(插件基于jq,坑爹啊!),如果你不知道放哪,那就放到 index.html 中。

2.在 上下载 Uploader.swf webuploader.min.js ,可以放到项目静态目录 static 下面;在 index.html 中引入webuploader.min.js。