在学习这个的时候有一点前提：这是针对手机功能的，所以最重要的是要用手机进行实时调试
包含图片的增加和删除功能
<template>
<div>
<!--照片区域-->
<div v-for="(urls, index) in imgs " style="float: left; margin: 10px ; border: 1px solid #ccc;">
<div style="text-align: right; position: relative;" v-on:click="deleteImg(index)">X</div>
<img :src="urls" width="100px" height="100px" />
</div>
<div style=" width: 100px; height: 100px; background-color: #ccc; border:1px solid #ccc; float: left; margin: 10px ;" v-on:click="imgClick()"></div>
<input style="float: left; display: none;" type="file" id=\'uploadFile\' accept="image/*" 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(event) {
alert(\'error\')
}
content = reader.readAsDataURL(localFile,"UTF-8");
var sss=document.getElementById("uploadFile").value;
console.log(sss);
}
},
mounted() {
},
created() {
},
components: {
}
}
</script>
<style scoped>
</style>