废话不多说,先看效果:
<template>
<div>
<p class="title" style="margin-top:1.875rem">商品图片</p>
<v-flex class="flex-center wrap">
<div
class="upload_warp_img flex-center rel "
v-for="(item,index) of imgList"
:key="index"
v-show="imgList.length>0"
>
<div class="upload_warp_img_div_top abs flex-center">
<i class="lnr-arrow-left-circle" @click="fileLeft(index)" v-if="index!=0"></i>
<i
class="lnr-arrow-right-circle"
@click="fileRight(index)"
style="margin-left:1.875rem"
v-if="index!=imgList.length-1"
></i>
<i class="lnr-cross-circle" @click="fileDel(index)" style="margin-left:1.875rem"></i>
</div>
<img :src="item.file.src" />
</div>
<div class="upload_warp flex-center" @click="fileClick" v-if="imgList.length<10">+</div>
<input
@change="fileChange($event)"
type="file"
id="upload_file"
multiple
style="display: none"
/>
</v-flex>
<div class="upload_warp_desc">格式:jpg/png,750px*750px,最多10张,默认第1张会显示在列表页。</div>
</div>
</template>
<script>
export default {
data: () => ({
imgList: [],
size: 0
}),
methods: {
fileClick() {
document.getElementById("upload_file").click();
},
fileChange(el) {
if (!el.target.files[0].size) return;
this.fileList(el.target);
el.target.value = "";
},
fileList(fileList) {
let files = fileList.files;
for (let i = 0; i < files.length; i++) {
//判断是否为文件夹
if (files[i].type != "") {
this.fileAdd(files[i]);
} else {
//文件夹处理
this.folders(fileList.items[i]);
}
}
},
//文件夹处理
folders(files) {
let _this = this;
//判断是否为原生file
if (files.kind) {
files = files.webkitGetAsEntry();
}
files.createReader().readEntries(function(file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i]);
} else {
_this.folders(file[i]);
}
}
});
},
foldersAdd(entry) {
let _this = this;
entry.file(function(file) {
_this.fileAdd(file);
});
},
fileAdd(file) {
//总大小
this.size = this.size + file.size;
//判断是否为图片文件
if (file.type.indexOf("image") == -1) {
file.src = "wenjian.png";
this.imgList.push({
file
});
} else {
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function() {
file.src = this.result;
this.vue.imgList.push({
file
});
};
}
console.log(this.imgList)
},
// 删除
fileDel(index) {
this.size = this.size - this.imgList[index].file.size; //总大小
this.imgList.splice(index, 1);
},
// 向前移动
fileLeft: function(index) {
this.imgList[index] = this.imgList.splice(
index - 1,
1,
this.imgList[index]
)[0];
},
fileRight: function(index) {
this.imgList[index] = this.imgList.splice(
index +1,
1,
this.imgList[index]
)[0];
},
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];
}
}
};
</script>
<style >
.upload_warp {
width: 8.25rem;
height: 8.25rem;
border: 1px dotted #b0b0b0;
font-size: 50px;
font-weight: bold;
color: #b0b0b0;
justify-content: center;
margin: 1.5rem 1.5rem 1rem 0;
}
.upload_warp_img img {
width: 8.25rem;
height: 8.25rem;
margin: 1.5rem 1.5rem 1rem 0;
}
.upload_warp_img_div_top {
width: 8.25rem;
height: 3rem;
top: -1.25rem;
justify-content: flex-end;
margin-right: 1rem;
}
i {
font-size: 1.5rem;
}
.upload_warp_desc{
font-size: 12px;
color: #666;
line-height: 18px;
}
</style>
有些样式设置在全局上,那就不贴那么多了,代码就是这些,简单实用