<template>
|
<div class="my-upload">
|
<div v-if="pictureList.length > 0" class="image-box">
|
<div v-for="image in pictureList" :class="{ 'image-box-item': true, 'image-box-item-cover': isShowUpload }">
|
<span v-if="isShowUpload" @click="handleDeletePicture(image)" class="image-delete-icon el-icon-delete"></span>
|
<el-image :key="image" class="image-content" :src="image" :preview-src-list="[image]"></el-image>
|
</div>
|
</div>
|
<el-upload
|
v-if="isShowUpload && pictureList.length < limit"
|
:file-list="fileList"
|
v-loading="loading"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
action=""
|
:multiple="multiple"
|
:show-file-list="flag"
|
:limit="limit"
|
:list-type="listType"
|
:auto-upload="true"
|
:http-request="handleUpload"
|
style="margin-left: 14px;"
|
>
|
<div class="upload-btn">
|
<i class="el-icon-plus"></i>
|
<span>上传图片</span>
|
</div>
|
</el-upload>
|
</div>
|
</template>
|
<script>
|
import imageManagement from "@/api/operate/imageManagement";
|
|
export default {
|
data() {
|
return {
|
// 文件列表
|
fileList: [],
|
// 是否显示文件列表
|
flag: false,
|
// 多选
|
multiple: false,
|
// 限制
|
limit: 4,
|
// 文件列表类型
|
listType: "picture-card",
|
loading: false
|
};
|
},
|
methods: {
|
// 验证上传文件
|
validateFile(file) {
|
if (
|
file.type !== "image/png" &&
|
file.type !== "image/svg+xml" &&
|
file.type !== "image/jpg" &&
|
file.type !== "image/jpeg"
|
) {
|
this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
|
this.loading = false;
|
return false;
|
}
|
|
if (file.size / 1024 / 1024 > 5) {
|
this.$message.error("上传图片不能超过 5MB!");
|
this.loading = false;
|
return false;
|
}
|
return true;
|
},
|
|
handleUpload(data) {
|
this.loading = true;
|
const { file } = data;
|
const validate = this.validateFile(file);
|
if (!validate) {
|
return;
|
}
|
const formData = new FormData();
|
formData.append('file', file);
|
imageManagement.importImage(formData)
|
.then(({ url1, url2, url3, url4 }) => {
|
const url = url1 ?? url2 ?? url3 ?? url4;
|
this.$emit('setPictureUrl', { url: url });
|
this.loading = false;
|
})
|
.catch(err => {
|
this.loading = false;
|
this.$message.error(err);
|
})
|
},
|
|
handleDeletePicture(imageUrl) {
|
this.$emit("delPictureUrl", { url: imageUrl });
|
},
|
},
|
props: {
|
pictureList: {
|
type: Array,
|
default: () => [],
|
},
|
isShowUpload: {
|
type: Boolean,
|
default: () => true,
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.my-upload {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: flex-start;
|
margin-right: 5px;
|
|
.upload-btn {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border-radius: 4px;
|
width: 100px;
|
height: 100px;
|
|
&:hover i {
|
color: #409eff;
|
}
|
|
i {
|
font-size: 30px;
|
font-weight: 650;
|
}
|
|
span {
|
line-height: 22px;
|
}
|
}
|
.image-box {
|
display: flex;
|
flex-wrap: wrap;
|
height: 100px;
|
|
.image-content {
|
width: 100px;
|
height: 100px;
|
}
|
|
.image-delete-icon {
|
position: absolute;
|
top: 45px;
|
left: 45px;
|
opacity: 0;
|
}
|
|
.image-box-item {
|
position: sticky;
|
margin: 0 10px;
|
}
|
|
.image-box-item-cover:hover {
|
.image-content {
|
box-shadow: #ffffff;
|
opacity: 0.5;
|
}
|
|
.image-delete-icon {
|
color: red;
|
font-size: 14px;
|
z-index: 2;
|
opacity: 1;
|
cursor: pointer;
|
}
|
}
|
}
|
|
:deep(.el-upload--picture-card) {
|
width: 100px;
|
height: 100px;
|
}
|
:deep(.el-upload-list__item) {
|
width: 100px;
|
height: 100px;
|
}
|
}
|
</style>
|
