基于vue的上传图片，包括显示进度条的代码
一、HTML代码
<div class="upload-imgs clearfix">
<ul class="upload-list fl">
<li class="upload-item fl" v-for="item,index in images">
<img :src="item" alt="" />
<span class="del-pic" @click="delImage(index)">x</span>
<p class="progress-bar"></p>
<p class="progress-txt">0%</p>
</li>
</ul>
<div class="upload-add fl" v-if="images.length<6">
<input type="file" @change="uploadPic($event)"/>
</div>
</div>
二、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<leng;i++){
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.onload =function(e){
that.images.push(e.target.result);
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);
},