自用 多檔案上傳圖片顯示
阿新 • • 發佈:2019-01-03
<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>