<style> img { width: 50px; height: auto; } </style> <template> <div id="app"> <div id="nav"> </div> <div> <input type="file" @change="changeFile" ref="changeFile" multiple="multiple" /> </div> <div v-for="(item,index) in imgList" :key="item.id"> <img:src="item.file.src" @click="deleteImg(index)"/> </div> </div> </template> <script> export default { data() { return { imgList: [] }; }, methods: { changeFile() { let that = this; for (var i = 0; i < this.$refs.changeFile.files.length; i++) { if ( this.$refs.changeFile.files[i].type.slice(0, 5) === "image" ) { let file = this.$refs.changeFile.files[i]; let reader = new FileReader(); // 调用reader.readAsDataURL()方法,把图片转成base64 reader.readAsDataURL(file); // 监听reader对象的onload事件,当图片加载完成时,把base64编码賦值给预览图片 reader.onload = function() { file.src = this.result; // 再把file对象添加到img数组 that.imgList.push({ file }); that.$refs.changeFile.value = ""; }; } } }, deleteImg(index) { this.imgList.splice(index, 1); } }, mounted() {}, watch: { imgList(a) { console.log(a); } } }; </script>