lcw/xzlz_JczWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-07-09 18:02:06 +08:00
parent 9f84ea1564
commit e54185f48b
17 changed files with 556 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/MyComponents/Upload/index.vue
View File

@ -1,39 +1,26 @@
<template>
<!-- :class="{show:listImg.length==limit}" -->
<div class="form-item-box" :style="{ width: width }">
<el-upload
v-bind="$attrs"
:headers="headers"
:multiple="false"
:disabled="disableds"
class="avatar-uploader"
:limit="props.limit"
:action="actionUrl"
list-type="picture-card"
:file-list="fileList"
show-file-list
:on-exceed="handleExceed"
:on-success="handlerSuccess"
:before-upload="beforeImgUpload"
>
<el-upload :class="{ 'hide-upload': fileList.length == limit }" v-bind="$attrs" :headers="headers" :multiple="false"
:disabled="disableds" class="avatar-uploader" :limit="props.limit" :action="actionUrl" list-type="picture-card"
:file-list="fileList" show-file-list :on-exceed="handleExceed" :on-success="handlerSuccess"
:before-upload="beforeImgUpload">
<template #default>
<el-icon> <Plus /> </el-icon>
<el-icon>
<Plus />
</el-icon>
</template>
<template #file="{ file }">
<div v-if="props.isImg">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<el-icon> <zoom-in /> </el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file, fileList)"
>
<el-icon><Delete /></el-icon>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon>
<Delete />
</el-icon>
</span>
</span>
</div>
@ -43,19 +30,15 @@
<span class="file-name">{{ file.name }}</span>
</div>
<span class="el-upload-list__item-actions">
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<el-icon> <Download /> </el-icon>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<el-icon>
<Download />
</el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file, fileList)"
>
<el-icon> <Delete /> </el-icon>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon>
<Delete />
</el-icon>
</span>
</span>
</div>
@ -181,13 +164,19 @@ const headers = ref({
});
const listImg = ref([]);
onMounted(() => {
console.log(props.modelValue);
if (props.modelValue&&props.modelValue.length>0) {
if (Array.isArray(props.modelValue)) {
listImg.value = props.modelValue;
fileList.value = props.modelValue.map((el) => {
return { url: `/mosty-api/mosty-base/minio/image/download/` + el };
});
} else {
listImg.value = props.modelValue.split(",");
fileList.value = props.modelValue.split(",").map((el) => {
return { url: `/mosty-api/mosty-base/minio/image/download/` + el };
});
}
if (props.modelValue) {
listImg.value = props.modelValue;
fileList.value = props.modelValue.map((el) => {
return { url: `/mosty-api/mosty-base/minio/image/download/` + el };
});
} else {
listImg.value = [];
fileList.value = [];
@ -199,10 +188,10 @@ const handlerSuccess = (res, file) => {
file.url = `/mosty-api/mosty-base/minio/image/download/` + res.data;
fileList.value.push(file);
listImg.value.push(res.data);
emits("handleChange", listImg.value);
emits("update:modelValue", listImg.value);
emits("handleChange", listImg.value.toString());
emits("update:modelValue", listImg.value.toString());
};
const handlePreview = (file) => {};
const handlePreview = (file) => { };
const handleExceed = (files, fileList) => {
ElMessage.warning(`限制，只能上传${props.limit}个文件或图片`);
};
@ -242,14 +231,18 @@ const handleRemove = (file) => {
});
fileList.value.splice(index, 1);
listImg.value.splice(index, 1);
emits("handleChange", listImg.value);
emits("update:modelValue", listImg.value);
emits("handleChange", listImg.value.toString());
emits("update:modelValue", listImg.value.toString());
};
onUnmounted(() => {
listImg.value = [];
});
</script>
<style>
.hide-upload .el-upload--picture-card {
display: none;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;