vue+element上传图片并显示预览图

html代码:

 <el-upload class="avatar-uploader aUpload" action="" 
                                    :show-file-list="false" 
                                    :on-success="handleAvatarSuccess" 
                                    :on-change="onchange" :multiple="true">
                                    <ul class="editS_ul">
                                        <li v-for="xx in aImgurl"><img :src="xx" class="avatar"></li>
                                        <li class="zhanImg" v-if="upJia==true">
                                            <img  class="el-icon-plus avatar-uploader-icon" src="../../static/img/shangchuan.png"></img>
                                        </li>
                                    </ul>
                                    
  </el-upload>

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

猜你喜欢

转载自blog.csdn.net/journeynana/article/details/87810643