<template>
<div class="file-box">
<!--照片区域-->
<div class="img-box" v-for="(urls, index) in imgs " :key="urls">
<van-icon name="clear" v-on:click="deleteImg(index)"/>
<img :src="urls" width="100px" height="100px"/>
</div>
<input type='button' class='btn' value='拍照' v-on:click="imgClick()"/>
<input type="file" name="cover" class="file" id="uploadFile" accept="image/*" capture="camera" multiple v-on:change="readLocalFile()">
</div>
</template>
<script>
export default{
data() {
return {
imgs:[]
}
},
methods:{
//删除图片
deleteImg:function(index){
this.imgs.splice(index,1);
},
//图片click
imgClick:function(){
document.getElementById("uploadFile").click();
},
//点击选中图片
readLocalFile: function () {
var localFile = document.getElementById("uploadFile").files[0];
var reader = new FileReader();
var content;
var current=this;
reader.onload = function(event) {
content = event.target.result;
current.imgs.push(content); //获取图片base64代码
}
reader.onerror = function() {
alert('error')
}
content = reader.readAsDataURL(localFile,"UTF-8");
var sss=document.getElementById("uploadFile").value;
console.log(sss);
}
},
}
</script>
<style scoped>
.file-box{
position:relative;
width:340px
}
.btn{
background-color: #FFF;
border: 1px solid #CDCDCD;
height: 26px;
width: 70px;
position: absolute;
left: 190px;
top: 10px;
}
.file{
position: absolute;
top: 10px;
opacity: 0;
width: 70px;
left: 190px;
}
.img-box{
width: 100px;
height: 100px;
position: relative;
padding: 10px;
}
.img-box i{
position: absolute;
right: 2px;
top: 2px;
}
</style>
