element upload预览_vue+element上传图片并显示预览图

html代码：

:show-file-list="false"

:on-success="handleAvatarSuccess"

:on-change="onchange" :multiple="true">

                                    

js代码：

//上传图片

onchange:function(file, fileList){

var _this=this;

var event = event || window.event;

var file = event.target.files || event.dataTransfer.files;

console.log(file);

var len=file.length;

var initlen = $(".editS_ul li").length -1;//原有的图片数目

console.log(initlen);

if(len+initlen>=10){

len = 10 - initlen;

this.upJia=false;

}

if(len == undefined || len == 0){

return false;

}

for(var i=0;i_this.fileList.push(file[i]); //将传入的图片push到空对象中

_this.reads(file[i]);

console.log(_this.fileList);//onchange事件一共选中的人数

}

}，

//生成预览图

reads:function(file) {

var _this=this;

//定义一个文件阅读器

//                    var FileName=file.name;

//                    console.log(FileName);

var reader = new FileReader();

//文件装载后将其显示在图片预览里

reader.onload = function (e) {

_this.aImgurl.push(reader.result);//将bade64位图片保存至数组里供上面图片显示

//                        console.log(_this.aImgurl);

}

reader.readAsDataURL(file);

}