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);        
             }