<template>
|
<div class="upload-img-content">
|
<el-upload
|
v-if="imgList.length < imgNum"
|
action
|
:multiple="multiple"
|
:http-request="uploadFileHandle"
|
:before-upload="beforeAvatarUploadImg"
|
:show-file-list="false"
|
:on-exceed="handleExceed"
|
:limit="imgNum"
|
>
|
<div class="img-add-box mr-r-10 mr-b-10">
|
<i class="el-icon-plus"></i>
|
</div>
|
</el-upload>
|
<div class="img-item fl-co" v-for="(item, index) in imgList" :key="index">
|
<el-image
|
:z-index="9999"
|
class="img-style"
|
:preview-src-list="[item]"
|
:src="item"
|
fit="cover"
|
></el-image>
|
<img
|
class="delete-img"
|
@click="deleteImg(index)"
|
src="../../assets/deleteimg.png"
|
alt="delete"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
imgNum: {
|
type: Number,
|
default: 9
|
},
|
ix: {
|
type: Number,
|
default: 0
|
},
|
imgShow: {
|
type: String,
|
default: ""
|
},
|
multiple: {
|
type: Boolean,
|
default: false
|
},
|
formKey: {
|
type: String,
|
default: ""
|
}
|
},
|
data() {
|
return {
|
imgList:
|
this.imgShow === "" || this.imgShow == null
|
? []
|
: this.imgShow.split(",")
|
};
|
},
|
watch: {
|
imgShow(url) {
|
this.imgList = url === "" || !url ? [] : url.split(",");
|
}
|
},
|
methods: {
|
handleExceed(files, fileList) {
|
demo.toast(
|
`当前限制选择 ${this.imgNum} 个文件，本次选择了 ${
|
files.length
|
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
);
|
},
|
|
uploadFileHandle(f) {
|
let formData = new FormData();
|
formData.append("file", f.file);
|
this.fileTransmit("loading", true); // 上传图片过程种提交按钮 loading 状态
|
this.$api.post("communitypartybuilding/uploadimage", formData, res => {
|
this.fileTransmit("loading", false);
|
this.imgList.push(res);
|
this.fileTransmit("list", this.imgList.join(","));
|
});
|
},
|
beforeAvatarUploadImg(file) {
|
const imgType = ["image/png", "image/jpeg"];
|
if (imgType.indexOf(file.type) === -1) {
|
this.$message.error("只能上传 png jpeg jpg 格式图片!");
|
return false;
|
} else {
|
return true;
|
}
|
},
|
// 删除图片
|
deleteImg(index) {
|
this.imgList.splice(index, 1);
|
this.fileTransmit("list", this.imgList.join(","));
|
},
|
fileTransmit(type, val) {
|
this.$emit("fileHandle", {
|
type: type,
|
val: val,
|
ix: this.ix,
|
key: this.formKey
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.upload-img-content {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.img-add-box {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 98px;
|
height: 98px;
|
border: 1px dashed #999;
|
border-radius: 10px;
|
}
|
.img-item {
|
position: relative;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
}
|
.delete-img {
|
cursor: pointer;
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 20px;
|
height: 20px;
|
}
|
.img-style {
|
width: 100px;
|
height: 100px;
|
border-radius: 10px;
|
}
|
.video-style {
|
width: 160px;
|
height: 100px;
|
background-color: #000;
|
}
|
.pr {
|
position: relative;
|
}
|
</style>
|
