vue实现多张图片上传与预览
标签：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
