码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-05-11 18:49:46      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:label   ack   取图   图片   fileread   eth   图片路径   click   上传   

 方法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实现多张图片上传与预览

标签:label   ack   取图   图片   fileread   eth   图片路径   click   上传   

原文地址:https://www.cnblogs.com/meiyanstar/p/12870711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!