vue实现多张图片上传与预览

Posted 2020-11-28 meiyanstar

 方法1：

html:

<div v-if=‘imgsback.length>0‘ class="flex">

            <div class="img-box" v-for="(item, i) in imgsback" :key=‘i‘ >

                       <img class="img" :src="item" > <span @click="delimgback(i)"><i class="el-icon-delete"></i></span>

             </div>

</div>

<div class="img-file" v-if=‘imgsback.length < sizeback‘>

<input type="file" id=‘files‘ @change=‘fileChangeback($event)‘>

        <label for="files"></label>

</div>

数据：

 data(){

            return{

　　　　  imgsback: [],      // 图片预览地址

                imgfilesback: [],  // 图片原文件，上传到后台的数据

                sizeback: 1 ,      // 限制上传数量

｝

方法methods:

fileChangeback(e) {  // 加入图片

                var _this = this

                var event = event || window.event;

                var file = event.target.files

                var leng=file.length;

                for(var i=0;i<leng;i++){

                    var reader = new FileReader();    // 使用 FileReader 来获取图片路径及预览效果

                    _this.imgfilesback.push(file[i])

                    reader.readAsDataURL(file[i]); 

                    reader.onload =function(e){

                    _this.imgsback.push(e.target.result);   // base 64 图片地址形成预览                                 

                    };                 

                }

            },

方法2：