python 大文件分片上传_Vue2.0结合webuploader实现文件分片上传

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

上传就上传吧，为什么搞得那么麻烦，用分片上传？

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

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

实现后的界面：

在项目中引入webuploader

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

在官网上下载Uploader.swf和webuploader.min.js，可以放到项目静态目录static下面；在index.html中引入webuploader.min.js。

(无需单独再引入webuploader.css，因为没有几行css，我们可以复制到vue组件中。)

需要注意的点：

在vue组件中，通过import './webuploader';的方式引入webuploader，会报''caller', 'callee', and 'arguments' properties may not be accessed on strict mode ...'的错， 这是因为你的babel使用了严格模式，而caller这些在严格模式下禁止使用。所以可以直接在index.html中引入webuploader.js，或者手动去解决babel中'use strict'的问题。

基于webuploader封装Vue组件

封装好的组件upload.vue如下，接口可以根据具体的业务进行扩展。

注意：功能和ui分离，此组建封装好了基本的功能，没有提供ui，ui在具体的页面上去实现。

export default {

name: 'vue-upload',

props: {

accept: {

type: Object,

default: null,

},

// 上传地址

url: {

type: String,

default: '',

},

// 上传最大数量 默认为100

fileNumLimit: {

type: Number,

default: 100,

},

// 大小限制 默认2M

fileSingleSizeLimit: {

type: Number,

default: 2048000,

},

// 上传时传给后端的参数，一般为token，key等

formData: {