Vue项目中使用WebUploader实现文件上传的方法

'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' ); //根据上传进度改变进度条宽度
});

 

uploadProgress 

事件的回调函数的参数 file 是文件的一些信息， percentage 则是文件上传进度，1为上传完毕，从上面代码可以看到，在文件开始上传后，会在 fileQueued 事件中动态创建的 id=fileList 元素中动态创建一个进度条容器，并根据上传进度动态改变进度条的宽度，这样就有了进度条的效果，需要注意的是，以上事件中动态生成的 dom 元素，例如文件列表、进度条的样式都需要我们自己去写， webuploader.css 中并没有，这一点官网没提醒，我第一次使用时，也被坑了

文件上传成功、失败、完成处理

文件上传成功

可以在该事件回调函数中移除进度条、更改进度条状态等操作

 

uploader.on( 'uploadSuccess', function( file,response ) {
 console.log('文件上传成功',file,response)
  $( '#'+file.id ).find('p.state').text('已上传');
 });

文件上传失败

可以在该事件回调函数中更改提示文本，改变进度条样式，删除上传失败的文件等操作

uploader.on( 'uploadError', function( file,reason ) {
console.log('文件上传失败',file,reason)
$( '#'+file.id ).find('p.state').text('上传出错');
});

文件上传完成

可以在该事件回调函数中更改提示文本，改变进度条样式等操作

uploader.on( 'uploadComplete', function( file ) {
console.log('文件上传完成')
 $( '#'+file.id ).find('.progress').fadeOut();
});

总结

以上所述是小编给大家介绍的Vue项目中使用WebUploader实现文件上传的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！