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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
js给selected添加options的方法
May 06 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python实现顺序表的简单代码
2018/09/28 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python中time、datetime模块的使用
2020/12/14 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
教师工作证明范本
2015/06/12 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
小学班主任研修日志
2015/11/13 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python manim实现排序算法动画示例
2022/08/14 Python