vue 中怎么利用webuploader 实现文件上传功能

tangjin

作者

今天就跟大家聊聊有关vue 中怎么利用webuploader 实现文件上传功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

一、封装组件

引入百度提供的webuploader.js、Uploader.swf

css样式就直接写在组件里面了

<template>
<div>
<divid="list"class="uploader-list"></div>
<divid="wrapper">
<divclass="uploader-container">
<div:id="id"limitSize="1":ext="ext"></div>
<el-buttonsize="small":loading="uploadLoading"type="success"@click="start">上传到服务器</el-button>
<el-button:disabled="stopBtn"size="small"type="danger"@click="stop">暂停上传</el-button>
</div>
</div>
<divclass="el-upload__tip">{{tip}}</div>
<divclass="file-list">
<ulclass="el-upload-listel-upload-list&#45;&#45;text">
<liv-for="fileinfileList":class="['el-upload-list__item','is-'+file.status]":key="file">
<aclass="el-upload-list__item-name">
<iclass="el-icon-document"></i>{{file.name}}
</a>
<labelclass="el-upload-list__item-status-label">
<i:class="{'el-icon-upload-success':true,'el-icon-circle-check':listType==='text',
'el-icon-check':['picture-card','picture'].indexOf(listType)>-1}"></i>
</label>
<iclass="el-icon-close"@click="removeFile(file)"></i>
<el-progress
v-if="file.status==='uploading'"
:type="listType==='picture-card'?'circle':'line'"
:stroke-width="listType==='picture-card'?6:2"
:percentage="file.percentage">
</el-progress>
</li>
</ul>
</div>
</div>
</template>
<script>
import'../js/jquery.js'
import'../js/webuploader.js'
import{Base64}from'js-base64'
importCryptoJSfrom'crypto-js';

exportdefault{
name:'fileUpload',
props:{
id:{
type:String,
default:function(){
return"filePicker";
}
},
//上传提示
tip:{
type:String,
default:function(){
return"";
}
},
//文件后缀名限制
ext:{
type:String,
default:function(){
return"jpg,jpeg,png,pdf,mp4,avi.mp3";
}
},
//分片大小设置
chunkSize:{
type:Number,
default:function(){
return2097152;
}
},
//分片上传重试次数
chunkRetry:{
type:Number,
default:function(){
return1;
}
},
//是否自动上传
auto:{
type:Boolean,
default:function(){
returnfalse;
}
},
//上传文件大小限制
sizeLimit:{
type:Number,
default:function(){
return209715200;
}
},
//上传文件数量限制
countLimit:{
type:Number,
default:function(){
return5;
}
}
},
data(){
return{
appId:AppConfig.appId,
securityKey:AppConfig.securityKey,
checkUrl:AppConfig.checkUrl,
uploadUrl:AppConfig.uploadUrl,
mergeUrl:AppConfig.mergeUrl,
previewName:'选择文件',
wul_fileMd5:'',
wul_size:0,
wul_fileName:'',
wul_chunk:0,
wul_uploader:'',
fileList:[],
listType:'text',
percentage:0,
fileObject:{
uid:'',
name:'',
ext:'',
type:'',
status:'',
percentage:0,
url:''
},
uploadLoading:false,
stopBtn:true
}
},
methods:{
/**
*获取当前上传列表中的文件
*@returns{Array|*}
*/
getFileList:function(){
returnthis.fileList;
},
//绑定事件
wul_init:function(){
//提示只能选择一个文件
this.wul_uploader.on('filesQueued',function(files){
if(files.length>1){
this.$message({
message:'请选择一张图片',
type:'error'
});
for(vari=0;i<files.length;i++){
this.wul_uploader.cancelFile(files[i]);
}
this.wul_uploader.reset();
this.wul_fileMd5="";
this.wul_size=0;
this.wul_fileName="";
this.wul_chunk=0;//当前切片数
}else{
if(this.fileList.length==this.countLimit){
this.$message({
message:'已经达到上传文件限制数量',
type:'error'
});
}else{
//此时往需要上传的文件列表中添加文件
letfile={
uid:Date.now()+this.tempIndex++,
name:files[0].name,
type:files[0].type,
ext:files[0].ext,
status:"ready",
percentage:0
}
this.fileObject=file;
this.fileList.push(this.fileObject);
}
}
}.bind(this));

//文件校验格式和大小
this.wul_uploader.on('error',function(type){
debugger
if(type=='Q_EXCEED_SIZE_LIMIT'){
this.$message({
message:'文件超过指定大小',
type:'error'
});
}
if(type=='Q_TYPE_DENIED'){
this.$message({
message:'文件格式错误，请选择文件',
type:'error'
});
}
if(type=='F_EXCEED_SIZE'){
this.$message({
message:"文件超过"+this.sizeLimit/1024/1024+"M",
type:'error'
});
}
}.bind(this));

//上传进度
this.wul_uploader.on('uploadProgress',function(file,percentage){
this.percentage=percentage*100;
this.fileObject.status="uploading";
this.fileObject.percentage=this.percentage;
console.log(this.fileObject.percentage);
}.bind(this));

//每次切片上传完成之后的判断
this.wul_uploader.on('uploadAccept',function(object,ret){
if(ret.responseCode!=0){
this.wul_uploader.cancelFile(this.wul_uploader.getFiles()[0].id);
}
});

this.wul_uploader.on('uploadBeforeSend',function(object,data,headers){
console.log(data);
});
},

option:function(key,val){
this.wul_uploader.option(key,val);
varoptions=this.wul_uploader.options;
this.wul_uploader.destroy();//注销uploader
this.wul_uploader=WebUploader.create(options);
this.wul_init();
},
start:function(){
if(this.wul_uploader.getFiles()[0]!=null){
this.wul_uploader.upload(this.wul_uploader.getFiles()[0].id);
this.uploadLoading=true;
this.stopBtn=false;
}else{
this.$message({
message:"请选择上传文件",
type:'error'
});
}
},
stop:function(){
this.wul_uploader.cancelFile(this.wul_uploader.getFiles()[0].id);
},
removeFile:function(file){
this.fileList.splice(this.fileList.indexOf(file),1);
},
change:function(){
this.option('accept',{
title:'Images',
extensions:'gif,jpg,jpeg,bmp,png'
});
}
},
mounted(){
WebUploader.Uploader.register({
"before-send-file":"beforeSendFile",
"before-send":"beforeSend",
"after-send-file":"afterSendFile",
},{
beforeSendFile:function(file){
vardeferred=WebUploader.Deferred();
this.wul_uploader.md5File(file).then(function(val){
this.wul_fileMd5=val;
this.wul_size=file.size;
this.wul_fileName=file.name;
vartimestamp=Date.parse(newDate())/1000;
varsignParam="{chunkSize="+this.chunkSize+",fileMd5="+this.wul_fileMd5+",size="+this.wul_size+",timestamp="+timestamp+"}";
varsign=Base64.encode(CryptoJS.HmacSHA1(signParam,this.securityKey));
//获取断点续传位置
jQuery.ajax({
type:"POST",
//测试
url:this.checkUrl,
data:{
//文件大小
size:this.wul_size,
//文件唯一标记
fileMd5:this.wul_fileMd5,
//切片大小
chunkSize:this.chunkSize,
//签名
sign:sign,
//应用分配id
appId:this.appId,
//当前时间戳
timestamp:timestamp

},
dataType:"json",
//上传失败
error:function(XMLHttpRequest,textStatus,errorThrown){
this.$message({
message:"上传失败...",
type:'error'
});
this.uploadLoading=false;
this.stopBtn=true;
}.bind(this),
success:function(response){
if(response.responseCode==0){//切片获取成功
this.wul_chunk=response.chunk;
deferred.resolve();
}else{//切片获取失败,请求成功
this.wul_uploader.cancelFile(file);//取消文件上传
this.$message({
message:"切片检查失败,请联系管理员",
type:'error'
});
deferred.resolve();
this.uploadLoading=false;
this.stopBtn=true;
}
}.bind(this)
});
returndeferred.promise();
}.bind(this));
returndeferred.promise();
}.bind(this),
beforeSend:function(block){
vardeferred=WebUploader.Deferred();
if(block.chunk<this.wul_chunk){
returndeferred.reject();
}
this.wul_uploader.md5File(block.blob).then(function(chunkMd5){
vartimestamp=Date.parse(newDate())/1000;
varsignParam='{chunk='+block.chunk+',chunkMd5='+chunkMd5+',chunkSize='+this.chunkSize+',fileMd5='+this.wul_fileMd5+',size='+this.wul_size+',timestamp='+timestamp+'}';
varsignTemp=CryptoJS.HmacSHA1(signParam,this.securityKey);
varsign=Base64.encode(signTemp);//获取sign值
this.wul_uploader.options.formData={
'timestamp':timestamp,
'appId':this.appId,
'chunk':block.chunk,
'chunkSize':this.chunkSize,
'fileMd5':this.wul_fileMd5,
'chunkMd5':chunkMd5,
'size':this.wul_size,
'sign':sign
};
deferred.resolve();
}.bind(this))
returndeferred.promise();
}.bind(this),
afterSendFile:function(file){
vartimestamp=Date.parse(newDate())/1000;
varsignParam="{chunkSize="+this.chunkSize+",fileMd5="+this.wul_fileMd5+",fileName="+file.name+",size="+this.wul_size+",timestamp="+timestamp+"}";
varsign=Base64.encode(CryptoJS.HmacSHA1(signParam,this.securityKey));
//如果分块上传成功，则通知后台合并分块
jQuery.ajax({
type:"POST",
url:this.mergeUrl,
data:{
appId:this.appId,
fileMd5:this.wul_fileMd5,
fileName:file.name,
chunkSize:this.chunkSize,
sign:sign,
size:this.wul_size,
timestamp:timestamp
},
success:function(response){
if(response.responseCode==0){
this.fileObject.status="success";
this.fileObject.percentage=100;
this.fileObject.url=response.filePath;
}else{
this.fileObject.status="exception";
this.$message({
message:"上传失败,失败原因:"+response.responseMsg,
type:'error'
});
}
this.uploadLoading=false;
this.stopBtn=true;
this.wul_uploader.reset();
this.wul_fileMd5="";
this.wul_size=0;
this.wul_fileName="";
this.wul_chunk=0;//当前切片数
}.bind(this)
});
}.bind(this)
});
this.wul_uploader=WebUploader.create({
//swf文件路径
swf:'../js/Uploader.swf',
//文件接收服务端。
server:this.uploadUrl,
//定义选择按钮
pick:{
"id":"#"+this.id,
"innerHTML":this.previewName
},
//自动上传
auto:this.auto,
//禁止浏览器打开文件
disableGlobalDnd:true,
//添加截图功能
paste:'#wrapper',
//定义拖动面板
dnd:'#wrapper',
//分片上传
chunked:true,
//分片大小为2M
chunkSize:this.chunkSize,
//分片上传失败重试次数
chunkRetry:this.chunkRetry,
//图片不做压缩
compress:false,
//队列设置10个,为了选择多个文件的时候能提示
fileNumLimit:10,
//提前准备好下一个文件
prepareNextFile:true,
//限制单个文件大小
fileSingleSizeLimit:this.sizeLimit,
//线程数
threads:1,
//限制格式
accept:{
title:"access",
extensions:this.ext
}
});
this.wul_init();
}
}
</script>
<style>
/*----------------ResetCss---------------------*/
html,body,div,span,applet,object,iframe,h2,h3,h4,h5,h6,h7,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video,input{
margin:0;
padding:0;
border:none;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

html,body,form,fieldset,p,div,h2,h3,h4,h5,h6,h7{
-webkit-text-size-adjust:none;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}

body{
font-family:arial,sans-serif;
}

ol,ul{
list-style:none;
}

blockquote,q{
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after{
content:'';
content:none;
}

ins{
text-decoration:none;
}

del{
text-decoration:line-through;
}

table{
border-collapse:collapse;
border-spacing:0;
}

/*------------*/
#wrapper{
width:100%;
margin:0auto;
height:35px;
}

.img-preview{
width:160px;
height:90px;
margin-top:1em;
border:1pxsolid#ccc;
}

.cropper-wraper{
position:relative;
}

.upload-btn{
background:#ffffff;
border:1pxsolid#cfcfcf;
color:#565656;
padding:10px18px;
display:inline-block;
border-radius:3px;
margin-left:10px;
cursor:pointer;
font-size:14px;

position:absolute;
right:1em;
bottom:2em;
}
.upload-btn:hover{
background:#f0f0f0;
}
.uploader-container{
width:100%;
font-size:10px;
}

.webuploader-container{
position:relative;
width:100px;
height:21px;
float:left;
}
.webuploader-element-invisible{
position:absolute!important;
clip:rect(1px1px1px1px);/*IE6,IE7*/
clip:rect(1px,1px,1px,1px);
}
.webuploader-pick{
position:relative;
display:inline-block;
cursor:pointer;
background:#00b7ee;
padding:6px15px;

color:#fff;
text-align:center;
border-radius:3px;
overflow:hidden;
}
.webuploader-pick-hover{
background:#00a2d4;
}

.webuploader-pick-disable{
opacity:0.6;
pointer-events:none;
}
.file-list{
width:100%;
}
</style>

二、导出组件

varfileUpload=require('./src/file_upload.vue');

module.exports={
fileUpload
}

三、demo 引用方式

<template>
<div>
<el-cardclass="box-card">
<fileUploadref="fileUpload":ext="ext":countLimit="5":tip="tip">aaa</fileUpload>
</el-card>
</div>
</template>
<script>
import{fileUpload}from'@/components/fileUpload/index.js'
exportdefault{
name:'hello',
components:{fileUpload},
data(){
return{
fileList:[],
ext:'png,jpg,jpeg,mp3,mp4,pdf',
tip:'可上传png/jpg/jpeg/mp3/mp4/pdf，大小不超过200M'
}
},
created(){

},
methods:{
getFileList:function(){
this.fileList=this.$refs.fileUpload.getFileList();
console.log(this.fileList);
}
}
}
</script>

四、运行效果图