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

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

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

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行