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


Posted in Javascript onJuly 21, 2019

简介:

WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 。在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ 。两套运行时,同样的调用方式,可供用户任意选用。采用 大文件分片并发上传 ,极大的提高了文件上传效率。

分片、并发

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

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

预览、压缩

支持常用图片格式jpg,jpeg,gif,bmp,png 预览与压缩 ,节省网络数据传输。

解析 jpeg中的meta信息,对于各种 orientation 做了正确的处理,同时压缩后上传保留图片的所有 原始meta数据 。

多途径添加文件

支持 文件多选 , 类型过滤 , 拖拽 (文件&文件夹),图片 粘贴功能 。

粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制), Ctrl + V 便可添加此图片文件。

HTML5 & FLASH

兼容主流浏览器 ,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。

同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求

MD5秒传

当文件体积大、量比较多时,支持上传前做文件 md5值验证 ,一致则可直接跳过。

如果服务端与前端统一修改算法, 取段md5 ,可大大 提升验证性能 ,耗时在20ms左右

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

下载webuploader

下载并解压后,文件目录结构如下

Uploader.swf 

//样式文件     
webuploader.css
//定制版    
webuploader.custom.js   
webuploader.custom.min.js
webuploader.fis.js
//只有Flash实现的版本
webuploader.flashonly.js
webuploader.flashonly.min.js
//只有HTML5实现的版本
webuploader.html5only.js   
webuploader.html5only.min.js  
//完整版
webuploader.js     
webuploader.min.js 
//没有图像处理的版本。    
webuploader.noimage.js
webuploader.noimage.min.js
//不带文件日志功能的版本(默认完整版带日志功能)
webuploader.nolog.js
webuploader.nolog.min.js
//去除图片处理的版本,包括HTML5和FLASH.
webuploader.withoutimage.js
webuploader.withoutimage.min.js

注意:这里的 css 文件很少,只是那个上传文件按钮的样式,其他的样式需要自己书写,也可以直接追加在当前 vue 组件的样式里面

引入webuploader

使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

方法1:直接引入文件

这里我们使用完全压缩版的 webuploader.min.js ,同时还要引入 Uploader.swf webuploader.css ,所以可以删除其他版本的文件,只留这三个文件,将解压的 webuploader 文件夹直接放在 static 文件夹下.

在 index.html 中引入 webuploader.min.js

<script src="./static/webuploader-0.1.5/webuploader.min.js"></script>

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

重启项目后报错了,说缺少依赖 jquery ,打开源码 webuploader.js 看一下

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

原来 webuploader 是依赖于 juqery 或者 Zepto 的,那我们引入 jquery ,我们去 jquery 官网下载 jquery ,并在 index.html 中引入,注意,一定要在 webuploader.min.js 之前引入,在这里我下载的是 1.12.4 版本

<script src="./static/webuploader-0.1.5/jQuery1.12.4.js"></script>

写一个Demo

HTML部分

App.vue

<template>
 <div id="app">
  <div id="uploader" class="wu-example">
  <!--用来存放文件信息-->
  <div id="fileLilst" class="uploader-list"></div>
   <div class="btns">
   <!-- 选择文件的按钮 -->
    <div id="picker">选择文件</div>
   <!-- 开始上传按钮 -->
    <button id="uploadBtn" class="btn btn-default">开始上传</button>
   </div>
  </div>
 </div>
</template>

JS部分,初始化 webuploader

在 Vue 的 mounted 周期内实例化 webuploader 并进行配置

App.vue

mounted:function(){
  var uploader = WebUploader.create({
  // swf文件路径
  swf:'../static/webuploader-0.1.5/Uploader.swf',
  // 文件接收服务端。
  server: 'http://webuploader.duapp.com/server/fileupload.php',
  // 选择文件的按钮。可选。
  // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  pick: '#picker',
  // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  resize: false
 });
 }

文件加入队列前

可以在该事件回调函数中对文件类型进行筛选,或者根据文件大小决定是否开启分片上传

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

uploader.on( 'beforeFileQueued', function( file) {
 console.log('文件加入队前',file)
});

文件加入队列后

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

// 当有文件被添加进队列的时候
  uploader.on( 'fileQueued', function( file ) {
  console.log('文件加入队列后')
   var $list = $('#fileList')
   $list.append( '<div id="' + file.id + '" class="item">' +
    '<h4 class="info">' + file.name + '</h4>' +
    '<p class="state">等待上传...</p>' +
   '</div>' );
  });

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

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

点击 选择文件 按钮后,选择一个文件,就会如上图所示,出现文件列表,从代码可以看出,他是在选择文件之后,动态添加的的 dom ,显示文件名称以及状态,关于文件的详细信息,则可以从 fileQueued 事件的回调函数的参数 file 获取,我们打印一下 file

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

ext------------------------------文件后缀
id-------------------------------文件ID
lastModifiedDate-----------------文件最后修改时间
name-----------------------------文件名称
size-----------------------------文件大小(这里是以字节为单位,1字节=1KB,1M=1024KB,1m=1024*1024字节)
source---------------------------包含一些文件信息和方法,例如唯一标识的`ruid`、`uid`、`_hash`

文件上传中

主要利用了 webuploader 的 uploadProgress 事件,该事件会在文件上传过程中触发,可以利用该事件创建进度条

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

// 文件上传过程中创建进度条实时显示。
  uploader.on( 'uploadProgress', function( file, percentage ) {
  console.log('文件上传中',file,percentage)
   var $li = $( '#'+file.id ),
    $percent = $li.find('.progress .progress-bar');
   // 避免重复创建
   if ( !$percent.length ) {
    $percent = $('<div class="progress progress-striped active">' +
    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
    '</div>' +
    '</div>').appendTo( $li ).find('.progress-bar');
   }
   $li.find('p.state').text('上传中');
   $percent.css( 'width', percentage * 100 + '%' ); //根据上传进度改变进度条宽度
  });

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

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

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

文件上传成功

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

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

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

文件上传失败

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

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

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实现文件上传的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
jquery uaMatch源代码
Feb 14 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
AngularJS实现路由实例
Feb 12 Javascript
DOM事件探秘篇
Feb 15 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
js通过循环多张图片实现动画效果
Dec 19 Javascript
jquery插件开发模式实例详解
Jul 20 #jQuery
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 #Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 #Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 #Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 #Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 #Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 #Javascript
You might like
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
网上抓的一个特效
2007/05/11 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python实现杨辉三角思路
2017/07/14 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
自我评价中英文语句
2013/11/30 职场文书
健康证明
2015/06/19 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server