<template>
|
<div class="upload_index" style="height: 182px">
|
<transition-group name="el-zoom-in-center" class="upload_index">
|
<div
|
v-for="item in fileList"
|
:key="item.id"
|
class="file_lists_style"
|
@mouseenter="showClose(item)"
|
@mouseleave="setClose"
|
>
|
<div
|
:class="{
|
close_icon: close == item.id,
|
close_icons: close != item.id,
|
}"
|
>
|
<el-tooltip effect="dark" content="预览图片" placement="left">
|
<i class="el-icon-zoom-in" @click="lookImage(item)"></i>
|
</el-tooltip>
|
<div class="look_line" v-if="!disabled"></div>
|
<el-tooltip
|
effect="dark"
|
content="删除"
|
placement="right"
|
v-if="!disabled"
|
>
|
<i class="el-icon-delete" @click="delectImage(item)"></i>
|
</el-tooltip>
|
</div>
|
<img :src="item.url" class="file_img" />
|
<el-tooltip
|
class="item"
|
effect="light"
|
:content="item.nameImg"
|
placement="top"
|
>
|
<div class="img-text">{{ item.nameImg }}</div>
|
</el-tooltip>
|
</div>
|
<el-upload
|
:key="5762"
|
ref="upload"
|
class="upload_images"
|
:action="action"
|
:http-request="requestUpload"
|
:show-file-list="false"
|
:disabled="disabled"
|
:auto-upload="true"
|
:multiple="false"
|
:before-upload="beforeUpload"
|
>
|
<i class="el-icon-plus avatar_uploader_icon"><span>上传图片</span></i>
|
</el-upload>
|
</transition-group>
|
<div class="upload_info">
|
<slot name="info"></slot>
|
</div>
|
<el-dialog
|
:title="imgName"
|
class="prop_dialog imgName_dialog"
|
:visible.sync="asyncImage"
|
append-to-body
|
width="35%"
|
>
|
<div class="look-image">
|
<img :src="imageUrl" height="100%" width="100%" />
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "UploadPhoto",
|
props: {
|
fileList: {
|
type: Array,
|
default: () => [],
|
},
|
disabled: Boolean,
|
},
|
data() {
|
return {
|
action: "#",
|
close: "",
|
loading: null,
|
formData: null,
|
imageUrl: "",
|
imgName: "",
|
asyncImage: false,
|
};
|
},
|
methods: {
|
//展示删除样式
|
showClose(item) {
|
this.close = item.id;
|
},
|
//不展示删除样式
|
setClose() {
|
this.close = "";
|
},
|
//预览按钮
|
lookImage(item) {
|
this.imgName = item.nameImg;
|
this.imageUrl = item.url;
|
this.asyncImage = true;
|
},
|
|
//上传前校验
|
beforeUpload(file) {
|
if (this.fileList.length === 1) {
|
this.$message.warning("仅能上传一张人脸图像！");
|
return false;
|
}
|
console.log(file.size,'size???')
|
if (file.size > (1024 * 1024)) {
|
this.$message.warning("请上传小于1m的照片！！！");
|
return false;
|
}
|
},
|
//检查文件类型
|
checkFileType(name) {
|
let obj = {
|
jpg: true,
|
};
|
return obj[name];
|
},
|
//自定义上传方式
|
requestUpload(file) {
|
let type = file.file.name.split(".");
|
let bol = this.checkFileType(type[type.length - 1]);
|
if (!bol) {
|
this.$message.warning("请上传正确的文件格式");
|
return false;
|
}
|
this.createLoadling();
|
this.formData = new FormData();
|
this.formData.set("file", file.file);
|
this.$api.Notice.uploadImageNotices(this.formData)
|
.then((res) => {
|
if (res.statusMsg === "ok") {
|
this.loading.close();
|
this.$message.success("上传成功！！！");
|
this.fileList.push({
|
id: this.fileList.length + 1,
|
// url:`${process.env.VUE_APP_BASE_URL}${res.data}`,
|
url: `https://szpipe.thhy-tj.com/${res.data}`,
|
name: res.data,
|
nameImg: file.file.name,
|
});
|
}
|
})
|
.catch(() => {
|
this.loading.close();
|
});
|
},
|
//加载动画
|
createLoadling() {
|
this.loading = this.$loading({
|
lock: true,
|
text: "正在上传中....",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
},
|
//删除列表文件
|
delectImage(row) {
|
this.fileList.splice(
|
this.fileList.findIndex((item) => item.id == row.id),
|
1
|
);
|
this.$message.success("删除成功！");
|
this.$emit("update:fileList", this.fileList);
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.imgName_dialog {
|
::v-deep .el-dialog__title {
|
color: #39b5fe;
|
}
|
}
|
.upload_index {
|
display: flex;
|
flex-wrap: wrap;
|
position: relative;
|
|
.file_lists_style {
|
width: 100px;
|
height: 150px;
|
margin: 10px 4px;
|
position: relative;
|
display: flex;
|
justify-content: space-around;
|
flex-direction: column;
|
border-radius: 6px;
|
|
.file_img {
|
width: 100%;
|
height: 100%;
|
border-radius: 6px;
|
}
|
|
.close_icon {
|
width: 100%;
|
height: 100%;
|
font-size: 30px;
|
color: #dfdfdf;
|
position: absolute;
|
cursor: pointer;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 6px;
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
|
.close_icons {
|
display: none;
|
}
|
|
.look_line {
|
width: 2px;
|
height: 30px;
|
margin: 0 10px;
|
background-color: #cccccc;
|
}
|
}
|
|
.upload_images {
|
width: 100px;
|
height: 150px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 10px 4px;
|
border-radius: 6px;
|
position: relative;
|
border: 2px dashed #39b5fe;
|
}
|
|
.avatar_uploader_icon {
|
font-size: 28px;
|
color: #d8d8d8;
|
position: absolute;
|
transform: translate(-50%, -50%);
|
span {
|
font-size: 12px;
|
display: flex;
|
margin-top: 10px;
|
}
|
}
|
|
.upload_info {
|
color: #3e719d;
|
position: absolute;
|
left: 6px;
|
bottom: -20px;
|
line-height: 25px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-align: center;
|
text-overflow: ellipsis;
|
}
|
.img-text {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
font-size: 14px;
|
position: absolute;
|
white-space: nowrap;
|
overflow: hidden;
|
text-align: center;
|
text-overflow: ellipsis;
|
bottom: -20px;
|
color: #dfdfdf;
|
}
|
}
|
|
.look-image {
|
width: 352px;
|
height: 432px;
|
}
|
</style>
|
