vue获取上传进度_基于vue的上传图片，包括显示进度条的代码

一、HTML代码

• 　　　　　　

  x

  0%

二、CSS样式代码

/*上传图片*/

.upload-imgs  .upload-item{margin-right:20px;border:1px solid #e0e0e0;width:100px;height:100px;position:relative;}

.upload-imgs  .upload-item:hover  .del-pic{display:block;}

.upload-imgs  .upload-item  img{width:100px;height:100px;}

.upload-imgs  .upload-item  .del-pic{display:none;position:absolute;top:-1px;right:-1px;width:20px;height:20px;background-color:#ccc;color:#fff;font-size:18px;text-align:center;line-height:20px;cursor:pointer;}

.upload-imgs  .upload-item  .progress-bar{position:absolute;bottom:0;left:0;height:30px;line-height:30px;background-color:rgba(100, 100, 100, 0.5);width:0;text-align:center;}

.upload-imgs  .upload-item  .progress-txt{position:absolute;bottom:0;color:#fff;left:0;height:30px;line-height:30px;font-size:16px;width:100%;z-index:10;text-align:center;}

.upload-imgs  .upload-add{width:100px;height:100px;border:1px dashed #d0d0d0;position:relative;}

.upload-imgs  .upload-add  input{width:100%;height:100%;cursor:pointer;opacity:0;position:relative;z-index:1;}

.upload-imgs  .upload-add:before,.upload-imgs  .upload-add:after{content:"";position:absolute;background-color:#e6e6e6;top:50%;left:50%;}

.upload-imgs  .upload-add:before{width:40px;height:5px;margin-left:-20px;margin-top:-2.5px;}

.upload-imgs  .upload-add:after{width:5px;height:40px;margin-left:-2.5px;margin-top:-20px;}

三、JAVASCRIPT代码

data:function(){

return {

images:[],

pictures:[]

}

}

。。。。。。

uploadPic:function(e){

var srcElement=e.srcElement;

var fileList = e.target.files || e.dataTransfer.files;

if(fileList.length==0){

layer.msg("你已经取消了图片选择！");

return false;

}

if(!(/image\/+/gi).test(fileList[0].type)){

layer.msg("请选择图片类型！");

return false;

}

if(fileList[0].size>3145728){

layer.msg("上传图片不能超过3M");

return false;

}

this.createImage(fileList);

},

createImage:function(file){

if(typeof FileReader=='undefined'){

layer.msg("您的浏览器不支持图片上传，请升级您的浏览器");

return false;

}

var image = new Image();

var that = this;

var leng=file.length;

for(var i=0;i

var reader = new FileReader();

reader.readAsDataURL(file[i]);

reader.onload =function(e){

that.images.push(e.target.result);

var formData = new FormData();

formData.append("images",file[0]);

formData.append("type",2);

that.$http.post(window.location.protocol+"//"+API_AddRESS+"/upimage",formData,{

headers: {

Authorization:AUTH_TOKEN

},

processData: false,

contentType: false

}).then(function (res) {

var progressBar = document.getElementsByClassName("progress-bar")[that.images.length-1];

var progressTxt = document.getElementsByClassName("progress-txt")[that.images.length-1];

client = new XMLHttpRequest()

client.open("GET",api.images+res.data.data.dirname+'/'+res.data.data.basename)

client.onprogress = function(e) {

if (e.lengthComputable) {

var total = e.total;

var loaded = e.loaded;

var percentage = Math.ceil((loaded/total)*100);

console.log(percentage+'%');

progressBar.style.width = percentage+'%';

progressTxt.innerHTML=percentage+'%';

}

}

client.send()

if (res.data.code == 200){

that.pictures.push(res.data.data.id)

console.log(that.pictures);

}

}, function (res) {

if(res.data.code==401){

updateUserToken();

}

window.location.reload();

});

};

}

},

delImage:function(index){

this.images.splice(index,1);

this.pictures.splice(index,1);

console.log(this.pictures);

},

removeImage: function(e) {

this.images = [];

this.pictures=[];

console.log(this.pictures);

},