Vue 做图片上传
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
