在Vue项⽬中使⽤WebUploader实现⽂件上传
简介：
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左右
下载webuploader
下载并解压后，⽂件⽬录结构如下
//SWF⽂件，当使⽤Flash运⾏时需要引⼊。
Uploader.swf游戏app软件开发
//样式⽂件
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
/
/没有图像处理的版本。
//不带⽂件⽇志功能的版本（默认完整版带⽇志功能）
//去除图⽚处理的版本，包括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>
重启项⽬后报错了，说缺少依赖jquery，打开源码webuploader.js看⼀下
原来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>
⽅法2：模块化引⼊
下载webuploder
npm install webuploader --save
下载jquery
npm install jquery@1.12.4
在App.vue中引⼊webuploder和jquery
import $ from'jquery'
import WebUploader from'webuploader'
写⼀个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 = ate({
// swf⽂件路径
swf:'../static/webuploader-0.1.5/Uploader.swf',
// ⽂件接收服务端。
server:'webuploader.duapp/server/fileupload.php',
// 选择⽂件的按钮。可选。
// 内部根据当前运⾏是创建，可能是input元素，也可能是flash.
pick:'#picker',
// 不压缩image, 默认如果是jpeg，⽂件上传前会压缩⼀把再上传！
resize:false,
//是否开启⾃动上传
auto:false
});
}
⽂件加⼊队列前
可以在该事件回调函数中对⽂件类型进⾏筛选，或者根据⽂件⼤⼩决定是否开启分⽚上传汇编语言输入输出指令
<('beforeFileQueued',function( file){
console.log('⽂件加⼊队前',file)
});
⽂件加⼊队列后
// 当有⽂件被添加进队列的时候
jquery下载文件请求
<('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>');
int指针赋值});
点击选择⽂件按钮后，选择⼀个⽂件，就会如上图所⽰，出现⽂件列表，从代码可以看出，他是在选择⽂件之后，动态添加的的dom，显⽰⽂件名称以及状态，关于⽂件的详细信息，则可以从fileQueued事件的回调函数的参数file获取，我们打印⼀下file
ext------------------------------⽂件后缀
id-------------------------------⽂件ID
lastModifiedDate-----------------⽂件最后修改时间
name-----------------------------⽂件名称
size-----------------------------⽂件⼤⼩（这⾥是以字节为单位，1字节=1KB,1M=1024KB,1m=1024*1024字节）
source---------------------------包含⼀些⽂件信息和⽅法，例如唯⼀标识的`ruid`、`uid`、`_hash`
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论