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

Posted meiyanstar

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现多张图片上传与预览相关的知识,希望对你有一定的参考价值。

 方法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:

以上是关于vue实现多张图片上传与预览的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序如何给服务器上传多张图片,微信小程序实现上传多张本地图片到服务器和图片预览...

vue 实现图片上传与预览,以及清除图片

上传前多张图片预览

Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

上传多张图片预览

Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等