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 做图片上传
原文地址：https://www.cnblogs.com/golddemon/p/9747767.html