先上效果图:
具体代码如下:
<template>
<div>
<div class="img" >
<div class="upload">
<div class="upload_warp_left" @click="fileClick" >
<Button icon="ios-cloud-upload-outline" class="btn btn-success">上传图片</Button>
</div>
<div class="upload_warp_text">
选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}}
</div>
<div class="upload_warp" style="border: 1px solid white;">
<div class="upload_warp_img" v-show="imgList.length!=0" >
<div class="upload_warp_img_div" v-for="(item,index) of imgList">
<div class="upload_warp_img_div_top" >
<div class="upload_warp_img_div_text" >
{{item.file.name}}
</div>
<img src="/static/img/x.png" class="upload_warp_img_div_del" @click="fileDel(index)">
</div>
<img :src="item.file.src">
</div>
</div>
</div>
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
</div>
</div>
<div>
<Button type="primary" @click="submitImg">提交</Button>
</div>
<!-- 查看 -->
<div style="margin-top:20px;">
<Button type="primary" @click="lookImg">查看后台返回的图片</Button>
</div>
<div class="lookPng upload">
<div class="upload_warp" style="border: 1px solid white;">
<div class="upload_warp_img" v-show="backImgList.length!=0" >
<div class="upload_warp_img_div" v-for="(item,index) of backImgList">
<img id="backImages" :src=" 'data:image/jpeg;base64, '+ item">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
imgList: [],
backImgList: [],
size: 0
}
},
methods: {
// 查看图片
lookImg(){
this.$axios({
method: 'post',
headers:{'Content-Type':'multipart/form-data'},
// headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
url: 'http://192.168.25.41:8081/material/MaterialInfo/getFiles',
})
.then((res)=> {
console.log('res',res);
this.backImgList = res.data.result;
}).catch((error) =>{})
},
// 图片提交
submitImg(){
let files = this.imgList;
console.log("files",files)
let formData = new FormData();
for(var key in files){
formData.append('files', files[key].file);
}
// formData.append('files',this.imgList[0].file);
console.log(formData)
this.$axios({
method: 'post',
data:formData,
headers:{'Content-Type':'multipart/form-data'},
url: 'http://192.168.25.41:8081/material/MaterialInfo/filesUpload',
// url: this.baseURL + '/material/MaterialInfo/filesUpload',
})
.then((res)=> {
console.log('res',res);
}).catch((error) =>{})
},
//上传
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){
this.size = this.size + file.size;//总大小
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
},
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>
<style>
.upload_warp_img_div_del {
position: absolute;
top: 6px;
width: 16px;
right: 4px;
}
.upload_warp_img_div_top {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.4);
line-height: 30px;
text-align: left;
color: #fff;
font-size: 12px;
text-indent: 4px;
}
.upload_warp_img_div_text {
white-space: nowrap;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
}
.upload_warp_img_div img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.upload_warp_img_div {
position: relative;
height: 100px;
width: 120px;
border: 1px solid #ccc;
margin: 0px 5px 5px 0px;
float: left;
line-height: 100px;
display: table-cell;
text-align: center;
background-color: #eee;
cursor: pointer;
}
.upload_warp_img {
border-top: 1px solid #D2D2D2;
padding: 5px 0 0 5px;
overflow: hidden
}
.upload_warp_text {
text-align: left;
margin-bottom: 5px;
padding-top: 5px;
text-indent: 14px;
border-top: 1px solid #ccc;
font-size: 14px;
}
.upload_warp_right {
float: left;
width: 57%;
margin-left: 2%;
height: 100%;
border: 1px dashed #999;
border-radius: 4px;
line-height: 130px;
color: #999;
}
.upload_warp_left button {
margin: 1px 5px 0px 0px;
cursor:pointer;
}
.upload_warp_left {
float: left;
}
.upload_warp_left .btn-success{
background: rgb(45, 140, 240);
color:#fff;
}
.upload_warp {
margin: 5px;
}
.upload {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #fff;
width: 770px;
box-shadow: 0px 1px 0px #ccc;
border-radius: 4px;
}
.img {
width: 770px;
text-align: center;
}
/* 查看 */
.lookPng{
margin-top: 20px;
min-height: 30px;
height: 100%;
}
</style>
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140