idt sda ng- rop bbb over height ntb note

　　Vue圖片單圖或者多圖上傳代碼如下:

<template>

<div class="upimgBox"> <div class="container"> <div class="upload_warp_left" @click="fileClick" > <div class="addNote">+</div> </div> <!-- <div class="upload_warp_text"> 選中{{imgList.length}}張文件，共{{bytesToSize(this.size)}}; 最多上傳<span class="text-primary"> 6</span> 張圖片！ </div> --> <div class="upload_warp"> <div class="upload_warp_img" v-show="imgList.length!=0" > <div class="upload_warp_img_div" v-for="(item,index) of imgList" :key="index"> <div class="upload_warp_img_div_top" > <div class="upload_warp_img_div_del" @click="fileDel(index)">X</div> </div> <img :src="item.file.src"> </div> </div> </div> <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> </div> </div> </template>
<script> export default { name: "uploader", data() { return { imgList: [], size: 0 }; }, methods: { fileClick() { document.getElementById("upload_file").click(); }, fileChange(el) { if (!el.target.files[0].size) return; this.fileList(el.target.files); el.target.value = ""; }, fileList(files) { for (let i = 0; i < files.length; i++) { this.fileAdd(files[i]); } }, fileAdd(file) { // console.log(file, "54321"); this.size = this.size + file.size; //總大小 let reader = new FileReader(); reader.vue = this; if (this.imgList.length <= 3) { //判斷限制圖片上傳張數 reader.readAsDataURL(file); reader.onload = function() { file.src = this.result; this.vue.imgList.push({ file }); }; // console.log(this.imgList, "12345"); } else { this.$toast("最多上傳四張圖片"); } }, fileDel(index) { this.size = this.size - this.imgList[index].file.size; //總大小 this.imgList.splice(index, 1); }, bytesToSize(bytes) { if (bytes === 0) return "0 B"; let k = 1000, // or 1024 sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i]; }, dragenter(el) { el.stopPropagation(); el.preventDefault(); }, dragover(el) { el.stopPropagation(); el.preventDefault(); }, drop(el) { el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfer.files); } } }; </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .upload_warp_img_div_del { width: 16px; right: 4px; }
.upload_warp_img_div_top { position: absolute; top: 0; width: 100%; height: 20px; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-size: 12px; display: flex; justify-content: flex-end; align-items: center; /* border:1px solid red; */ }
.upload_warp_img_div img { width: 100%; height: 100%; }
.upload_warp_img_div { position: relative; height: 73px; width: 73px; border: 1px solid #ccc; margin: 0px 10px 5px 0px; float: left; text-align: center; background-color: #eee; cursor: pointer; /* border:1px solid red; */ }
.upload_warp_img { width: 100%; /* border-top: 1px solid #d2d2d2; */ padding: 5px 0 0 8px; overflow: hidden; margin-top: 10px; display: flex; justify-content: flex-start; align-items: center; /* border: 1px solid black; */ }
/* .upload_warp_text { text-align: left; margin-bottom: 5px; padding-top: 5px; text-indent: 14px; border-top: 1px solid #ccc; font-size: 14px; border:1px solid red; } */
.upload_warp_right { float: left; width: 57%; margin-left: 2%; height: 100%; border-radius: 4px; line-height: 130px; color: #999; }
.addNote { width: 60px; height: 60px; margin: 7px 5px 0px 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 45px; color: #bbbbbb; border: 1px solid #bbbbbb; }
.upload_warp_left { float: left; width: 100%; height: 80px; /* border: 1px solid red; */ }
.upload_warp { width: 100%; height: auto; display: flex; justify-content: space-around; align-items: center; /* border:1px solid black !important; */ }
.container { width: 97%; /* height: 80px; */ background-color: #fff; padding: 3px; margin: 0 auto; /* border:1px solid green; */ }
.upimgBox { width: 100%; /* text-align: center; */ } </style> 樣式有稍微改動調整,親測可用，轉載原貼如下:https://blog.csdn.net/weixin_41957098/article/details/80351914

Vue 做圖片上傳