Vue 做图片上传

Posted 2021-01-10 golddemon

　　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