1.效果图

2.上传文件时，如果使用普通上传，则需要上传一个文件完成后才能上传下一个文件，如果文件很大时，可能会造成浏览器无响应，如果采用分片上传方式，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。

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

在项目中引入webuploader

第一步：引入第三方js和css

注意：也可通过安装依赖的方式，引入jquery插件

npm install jquery --save

第二步：封装Vue组件

export default{

name: 'vue-upload',

props: {

accept: {

type: Object,

default: null,

},

// 上传地址

url: {

type: String,

default: uploadUrl,

},

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

fileNumLimit: {

type: Number,

default: 1,

},

// 大小限制 默认2M

fileSingleSizeLimit: {

type: Number,

default: 1024*1024*1024*10,

},

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

formData: {

type: Object,

default: null

},

// 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议

keyGenerator: {

type: Function,

default(file) {

constcurrentTime = newDate().getTime();

constkey = `${currentTime}.${file.name}`;

returnkey;

},

},

multiple: {

type: Boolean,

default: false,

},

// 上传按钮ID

uploadButton: {

type: String,

default: '',

},

},

data() {

return{

uploader: null

};

},

mounted() {

this.initWebUpload();

},

methods: {

initWebUpload() {

this.uploader = WebUploader.create({

auto: false, // 选完文件后，是否自动上传

// swf: '/static/lib/webuploader/Uploader.swf', // swf文件路径

server: this.url, // 文件接收服务端

pick: {

id: this.uploadButton, // 选择文件的按钮

multiple: this.multiple, // 是否多文件上传 默认false

label: '',

},

accept: this.getAccept(), // 允许选择文件格式。

threads:10,

fileNumLimit: this.fileNumLimit, // 限制上传个数

fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小

formData: this.formData, // 上传所需参数

chunked: true, //分片上传

chunkSize: 1024*1024*10, //分片大小

duplicate: true, // 重复上传

});

// 当有文件被添加进队列的时候，添加到页面预览

this.uploader.on('fileQueued', (file) => {

this.$emit('fileChange', file);

});

this.uploader.on('beforeFileQueued', (file) => {

this.$emit('beforeFileQueued', file);

});

this.uploader.on('uploadStart', (file) => {

console.log( this.keyGenerator)

// 在这里可以准备好formData的数据

// this.uploader.options.formData.key = this.keyGenerator(file);

});

// 文件上传过程中创建进度条实时显示。

this.uploader.on('uploadProgress', (file, percentage) => {

});

this.uploader.on('uploadSuccess', (file, response) => {

var_this=this;

this.$emit('success', file, response);

});

this.uploader.on('uploadError', (file, reason) => {

console.log(reason);

this.$emit('uploadsError', file, reason);

for(vari = 0; i < this.uploader.getFiles().length; i++) {

this.uploader.removeFile(this.uploader.getFiles()[i]);

}

this.uploader.reset();

this.initWebUpload();//初始化

});

this.uploader.on('error', (type) => {

let errorMessage = '';

if(type === 'F_EXCEED_SIZE') {

errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`;

} else if(type === 'Q_EXCEED_NUM_LIMIT') {

errorMessage = '文件上传已达到最大上限数';

} else{

errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;

}

console.error(errorMessage);

this.$emit('error', errorMessage);

});

this.uploader.on('uploadComplete', (file, response) => {

this.$emit('complete', file, response);

});

this.uploader.on('stopUpload', () => {

var_this=this;

_this.uploader.reset();

_this.initWebUpload();//初始化

});

this.uploader.on('uploadFinished', () => {

console.log(_this.uploader.getFiles())

});

},

getStats:function(){

return this.uploader.getStats();

},

upload(file,data) {

this.uploader.options.formData=data;//传参数

this.uploader.upload(file,data);

},

stop(file) {

this.uploader.stop(file);

},

reset(){

this.uploader.reset();

},

refresh(){

this.uploader.refresh();

},

// 取消并中断文件上传

cancelFile(file) {

this.uploader.cancelFile(file);

},

// 在队列中移除文件

removeFile(file, bool) {

this.uploader.removeFile(file, bool);

},

getFiles() {

return this.uploader.getFiles();

},

getAccept() {

return{

title: 'Videos',

extensions: 'mp4,flv,avi,wmv,ogg,rmvb,mts',

mimeTypes: '.mp4,.flv,.avi,.wmv,.ogg,.rmvb,.mts'

};

},

},

};

第三步 把第二步组件引到你的页面中，使用组件，实现分片上传