1.html
<div class="flex">
<template v-if="fileAll.length">
<div v-for="(item, i) in fileAll" :key="i" class="up-show posr">
<img
:src="item.url"
alt=""
@mouseover="imgEnter(item)"
@mouseleave="imgLeave(item)"
/>
<span
class="icon-box"
v-show="item.isShow"
@mouseover="imgEnter(item)"
@mouseleave="imgLeave(item)"
>
<span class="big-icon posa cp" @click.stop="upPreview(item)">
<el-icon><ZoomIn /></el-icon>
</span>
<span class="del-icon posa cp" @click.stop="upRemove(i)">
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
<el-upload
v-model:file-list="fileList"
:show-file-list="false"
:action="action"
:headers="headers"
:data="upData"
:limit="1"
list-type="picture-card"
:on-success="upSuccess"
:on-error="upError"
:on-change="upChange"
:before-upload="beforeUpload"
>
<el-icon><Plus /></el-icon>
</el-upload>
</div>
<teleport to="#fl-dialog">
<el-dialog v-model="isDialog" class="up-show-img" title="查看上传图片" width="30%" center>
<img :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</teleport>
<!-- 确定删除 -->
<Dialog
:isShow="isDel"
:title="'确认删除当前图片吗?'"
:sucTxt="'确认删除'"
@closeClick="isDel = false"
@sucClick="receiveSuc"
>
</Dialog>
2.js fileList这个默认值可以使用props获取
<script lang="ts" setup>
import Dialog from "@/components/common/dialog/index.vue";
import { Loading } from "@/components/common/loading/loading";
import { API_BASE_URL } from "@/utils/urlConfig";
import Message from "@/components/common/message/message";
import { StatusCode } from "@/utils/common-enum";
import { watch, reactive, toRefs, ref, defineProps } from "vue";
import type {
UploadProps,
UploadUserFile,
UploadFile,
UploadFiles,
UploadRawFile,
} from "element-plus";
// 默认值
const fileList = ref<UploadUserFile[]>([]);
const action = API_BASE_URL + "v1/home/imgupdalod";
const headers = {
Authorization: localStorage.token || "",
};
const dialogImageUrl = ref("");
const isDialog = ref(false);
// 所有图片
interface Data {
fileAll: {
url: string;
isShow: boolean;
}[];
isDel:boolean
}
const fileAllObj: Data = reactive<Data>({
fileAll: [],
isDel:false
});
const upData = reactive({
imgFile: {},
});
const beforeUpload = (rawFile: UploadRawFile) => {
// console.log(rawFile);
Loading.show();
};
const upChange = (uploadFile: any, uploadFiles: UploadFiles) => {
upData.imgFile = uploadFile.raw;
};
const upSuccess: UploadProps["onSuccess"] = (
res: any,
uploadFile: UploadFile,
uploadFiles: UploadFiles
) => {
Loading.hide();
if (res.code === StatusCode.code0) {
// fileList.value.length = 0.
const d = {
url: res.data,
isShow: false,
};
fileAllObj.fileAll.push(d);
emit("imgListAll", fileAllObj.fileAll);
} else {
Message.error(res.message || "上传图片接口报错");
}
};
const upError: UploadProps["onError"] = (
err: any,
uploadFile: UploadFile,
uploadFiles: UploadFiles
) => {
Loading.hide();
console.log(err);
};
const imgEnter = (item: { url: string; isShow: boolean }) => {
item.isShow = true;
};
const imgLeave = (item: { url: string; isShow: boolean }) => {
item.isShow = false;
};
// 放大
const upPreview = (item: { url: string; isShow: boolean }) => {
dialogImageUrl.value = item.url;
isDialog.value = true;
};
// 删除
let curI = -1
const upRemove= (i:number) => {
fileAllObj.isDel = true
curI = i
};
const receiveSuc = () => {
fileAllObj.fileAll.splice(curI,1)
fileAllObj.isDel = false
}
const emit = defineEmits(["imgListAll"]);
const { fileAll, isDel } = toRefs(fileAllObj);
// const props = defineProps<{
// }>();
</script>
3.css
<style scoped lang="scss">
.up-show {
width: 120px;
height: 60px;
margin-right: 16px;
img {
width: 120px;
height: 60px;
margin-right: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 4px;
}
.icon-box {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
.big-icon {
top: 20px;
left: 30px;
font-size: 20px;
color: #fff;
}
.del-icon {
top: 20px;
right: 30px;
font-size: 20px;
color: #fff;
}
}
}
.up-show-img {
img{
display: block;
margin: 0 auto;
}
}
</style>