zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化多图上传

Browse Source
This commit is contained in:
weiwei committed 2025-02-27 11:14:17 +08:00
1 parent 013afdf16e
commit 7826941946
8 files changed
+271 -331
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Upload/Image.vue
+75 -75
View File
@@ -20,15 +20,15 @@
<div class="upload-handle" @click.stop>
<div class="handle-icon" @click="editImg" v-if="!self_disabled">
<el-icon :size="props.iconSize"><Edit /></el-icon>
<span v-if="!props.iconSize">{{ $t('common.editBtn') }}</span>
<span v-if="!props.iconSize">{{ $t("common.editBtn") }}</span>
</div>
<div class="handle-icon" @click="imgViewVisible = true">
<el-icon :size="props.iconSize"><ZoomIn /></el-icon>
<span v-if="!props.iconSize">{{ $t('common.viewBtn') }}</span>
<span v-if="!props.iconSize">{{ $t("common.viewBtn") }}</span>
</div>
<div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
<el-icon :size="props.iconSize"><Delete /></el-icon>
<span v-if="!props.iconSize">{{ $t('common.delBtn') }}</span>
<span v-if="!props.iconSize">{{ $t("common.delBtn") }}</span>
</div>
</div>
</template>
@@ -54,145 +54,145 @@
</template>
<script setup lang="ts" name="UploadImg">
import { ref, computed, inject } from 'vue';
import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { generateUUID } from '/@/utils/other';
import request from '/@/utils/request';
import { ref, computed, inject } from "vue"
import { ElNotification, formContextKey, formItemContextKey } from "element-plus"
import type { UploadProps, UploadRequestOptions } from "element-plus"
import { generateUUID } from "/@/utils/other"
import request from "/@/utils/request"
interface UploadFileProps {
imageUrl?: string; // 图片地址 ==> 必传
uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string; // 组件高度 ==> 非必传（默认为 150px）
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
iconSize?: number;
dir?: string; // 文件目录
listType?: string;
imageUrl?: string // 图片地址 ==> 必传
uploadFileUrl?: string // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
drag?: boolean // 是否支持拖拽上传 ==> 非必传（默认为 true）
disabled?: boolean // 是否禁用上传组件 ==> 非必传（默认为 false）
fileSize?: number // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: File.ImageMimeType[] // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string // 组件高度 ==> 非必传（默认为 150px）
width?: string // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string // 组件边框圆角 ==> 非必传（默认为 8px）
iconSize?: number
dir?: string // 文件目录
listType?: string
}
// 接受父组件参数
const props = withDefaults(defineProps<UploadFileProps>(), {
imageUrl: '',
uploadFileUrl: '/admin/sys-file/upload',
imageUrl: "",
uploadFileUrl: "/admin/sys-file/upload",
drag: true,
disabled: false,
fileSize: 5,
fileType: () => ['image/jpeg', 'image/png', 'image/gif'],
height: '150px',
width: '150px',
borderRadius: '8px',
dir: '',
listType: '',
});
fileType: () => ["image/jpeg", "image/png", "image/gif"],
height: "150px",
width: "150px",
borderRadius: "8px",
dir: "",
listType: "",
})
// 生成组件唯一id
const uuid = ref('id-' + generateUUID());
const uuid = ref("id-" + generateUUID())
// 查看图片
const imgViewVisible = ref(false);
const imgViewVisible = ref(false)
// 获取 el-form 组件上下文
const formContext = inject(formContextKey, void 0);
const formContext = inject(formContextKey, void 0)
// 获取 el-form-item 组件上下文
const formItemContext = inject(formItemContextKey, void 0);
const formItemContext = inject(formItemContextKey, void 0)
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled || formContext?.disabled;
});
return props.disabled || formContext?.disabled
})
/**
* @description 图片上传
* @param options upload 所有配置项
* */
interface UploadEmits {
(e: 'update:imageUrl', value: string): void;
(e: "update:imageUrl", value: string): void
}
const emit = defineEmits<UploadEmits>();
const emit = defineEmits<UploadEmits>()
const handleHttpUpload = async (options: UploadRequestOptions) => {
let formData = new FormData();
formData.append('file', options.file);
formData.append('dir', props.dir);
let formData = new FormData()
formData.append("file", options.file)
formData.append("dir", props.dir)
try {
const { data } = await request({
url: props.uploadFileUrl,
method: 'post',
method: "post",
headers: {
'Content-Type': 'multipart/form-data',
"Content-Type": "multipart/form-data",
},
data: formData,
});
emit('update:imageUrl', data.url);
})
emit("update:imageUrl", data.url)
// 调用 el-form 内部的校验方法（可自动校验）
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string])
} catch (error) {
options.onError(error as any);
options.onError(error as any)
}
};
}
/**
* @description 删除图片
* */
const deleteImg = () => {
emit('update:imageUrl', '');
};
emit("update:imageUrl", "")
}
/**
* @description 编辑图片
* */
const editImg = () => {
const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
dom && dom.dispatchEvent(new MouseEvent('click'));
};
const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
dom && dom.dispatchEvent(new MouseEvent("click"))
}
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
const imgType = props.fileType.includes(rawFile.type)
if (!imgType)
ElNotification({
title: '温馨提示',
message: '上传图片不符合所需的格式！',
type: 'warning',
});
title: "温馨提示",
message: "上传图片不符合所需的格式！",
type: "warning",
})
if (!imgSize)
setTimeout(() => {
ElNotification({
title: '温馨提示',
title: "温馨提示",
message: `上传图片大小不能超过 ${props.fileSize}M！`,
type: 'warning',
});
}, 0);
return imgType && imgSize;
};
type: "warning",
})
}, 0)
return imgType && imgSize
}
/**
* @description 图片上传成功
* */
const uploadSuccess = () => {
ElNotification({
title: '温馨提示',
message: '图片上传成功！',
type: 'success',
});
};
title: "温馨提示",
message: "图片上传成功！",
type: "success",
})
}
/**
* @description 图片上传错误
* */
const uploadError = () => {
ElNotification({
title: '温馨提示',
message: '图片上传失败，请您重新上传！',
type: 'error',
});
};
title: "温馨提示",
message: "图片上传失败，请您重新上传！",
type: "error",
})
}
</script>
<style scoped lang="scss">
.is-error {
src/components/Upload/Images.vue
+123 -162
View File
@@ -1,169 +1,186 @@
<template>
<div class="upload-box">
<el-upload
ref="elUploadRef"
v-model:file-list="fileList"
list-type="picture-card"
:class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
multiple
:accept="fileType.join(',')"
:class="['upload', 'no-border', self_disabled ? 'disabled' : '']"
:drag="true"
:disabled="self_disabled"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-error="uploadError"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:before-upload="beforeUpload"
:on-error="uploadError"
:http-request="handleHttpUpload"
multiple
:drag="drag"
:disabled="self_disabled"
:accept="fileType.join(',')"
>
<div class="upload-empty">
<slot name="empty">
<el-icon><Plus /></el-icon>
<!-- <span>请上传图片</span> -->
</slot>
</div>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="el-upload__tip">
<slot name="tip"></slot>
</div>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
<img class="m-auto" w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElUpload, ElDialog, UploadRequestOptions, ElNotification, UploadFile, UploadProps, formContextKey } from 'element-plus';
import request from '/@/utils/request';
import { ref, watch } from "vue"
import { Plus } from "@element-plus/icons-vue"
import { ElUpload, ElDialog, UploadRequestOptions, ElNotification, UploadFile, UploadProps, formContextKey } from "element-plus"
import request from "/@/utils/request"
interface UploadFileProps {
imageUrls?: string; // 图片地址 ==> 必传
uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
fileType?: string[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height?: string; // 组件高度 ==> 非必传（默认为 150px）
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
disabled?: boolean
fileType?: string[]
fileSize?: number
height?: string
width?: string
borderRadius?: string
}
const props = withDefaults(defineProps<UploadFileProps>(), {
imageUrls: '',
uploadFileUrl: '/admin/sys-file/upload',
drag: true,
disabled: false,
fileType: () => ["image/jpeg", "image/png", "image/gif"],
fileSize: 5,
fileType: () => ['image/jpeg', 'image/png', 'image/gif'],
height: '150px',
width: '150px',
borderRadius: '8px',
});
height: "150px",
width: "150px",
borderRadius: "8px",
})
interface UploadEmits {
(e: 'update:imageUrls', value: string): void;
}
const emit = defineEmits<UploadEmits>();
const imageUrls = defineModel<string>()
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const elUploadRef = ref();
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
const dialogVisible = ref(false)
const fileList = ref<any>([])
const dialogImageUrl = ref("")
// 获取 el-form 组件上下文
const formContext = inject(formContextKey, void 0);
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH;
const formContext = inject(formContextKey, void 0)
// 上传
// 自定义上传方法
const handleHttpUpload = async (options: UploadRequestOptions) => {
let formData = new FormData();
formData.append('file', options.file);
let formData = new FormData()
formData.append("file", options.file)
try {
const res = await request({
url: props.uploadFileUrl,
method: 'post',
url: "/admin/sys-file/upload",
method: "post",
headers: {
'Content-Type': 'multipart/form-data',
"Content-Type": "multipart/form-data",
},
data: formData,
});
})
if (res.code == 0) {
return res;
return res
}
} catch (error) {
options.onError(error as any);
options.onError(error as any)
}
};
// 移除
const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
const urls = uploadFiles.map((item) => item.response.data.url).join(',');
emit('update:imageUrls', urls);
};
// 预览
const handlePictureCardPreview = (uploadFile: any) => {
dialogImageUrl.value = imageBaseUrl + uploadFile.response.data.url;
dialogVisible.value = true;
};
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled || formContext?.disabled;
});
watch(
() => props.imageUrls,
(newValue) => {
if (!newValue) elUploadRef.value.clearFiles();
}
);
}
/**
* @description 文件上传之前判断
* @param rawFile 选择的文件
* */
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
const imgType = props.fileType.includes(rawFile.type)
if (!imgType)
ElNotification({
title: '温馨提示',
message: '上传图片不符合所需的格式！',
type: 'warning',
});
title: "温馨提示",
message: "上传图片不符合所需的格式！",
type: "warning",
})
if (!imgSize)
setTimeout(() => {
ElNotification({
title: '温馨提示',
title: "温馨提示",
message: `上传图片大小不能超过 ${props.fileSize}M！`,
type: 'warning',
});
}, 0);
return imgType && imgSize;
};
type: "warning",
})
}, 0)
return imgType && imgSize
}
/**
* @description 图片上传成功
* */
const uploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: any) => {
const urls = uploadFiles.map((item: any) => item.response.data.url).join(',');
emit('update:imageUrls', urls);
console.log("success", uploadFiles)
const urls = uploadFiles
.map((item: any) => {
// 处理新上传和已有的图片URL
return item.response ? item.response.data.url : item.fileUrl
})
.filter(Boolean)
.join(",")
imageUrls.value = urls
console.log("fileList.value", fileList.value)
console.log("urls", urls)
ElNotification({
title: '温馨提示',
message: '图片上传成功！',
type: 'success',
});
};
title: "温馨提示",
message: "图片上传成功！",
type: "success",
})
}
// 预览
const handlePictureCardPreview = (uploadFile: any) => {
dialogImageUrl.value = uploadFile.url
dialogVisible.value = true
}
// 移除
const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
const urls = uploadFiles
.map((item) => {
return item.response ? item.response.data.url : item.fileUrl
})
.filter(Boolean)
.join(",")
imageUrls.value = urls
}
/**
* @description 图片上传错误
* */
const uploadError = () => {
ElNotification({
title: '温馨提示',
message: '图片上传失败，请您重新上传！',
type: 'error',
});
};
title: "温馨提示",
message: "图片上传失败，请您重新上传！",
type: "error",
})
}
// 判断是否禁用上传和删除
const self_disabled = computed(() => {
return props.disabled || formContext?.disabled
})
watch(
() => imageUrls.value,
(newValue) => {
if (!newValue) {
fileList.value = []
return
}
fileList.value = newValue
.split(",")
.map((item: string) => {
const url = item.startsWith("http") ? item : imageBaseUrl + item
return {
name: item.split("/").pop() || "",
url: url,
fileUrl: item,
}
})
.filter((item) => item.url)
},
{ immediate: true },
)
</script>
<style scoped lang="scss">
@@ -191,7 +208,6 @@ const uploadError = () => {
}
.upload-box {
overflow: hidden;
.no-border {
:deep(.el-upload) {
border: none !important;
@@ -234,62 +250,7 @@ const uploadError = () => {
background-color: var(--el-color-primary-light-9);
border: 2px dashed var(--el-color-primary) !important;
}
.upload-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.upload-empty {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 30px;
color: var(--el-color-info);
.el-icon {
font-size: 28px;
color: var(--el-text-color-secondary);
}
}
.upload-handle {
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer;
background: rgb(0 0 0 / 60%);
opacity: 0;
transition: var(--el-transition-duration-fast);
.handle-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 6%;
color: aliceblue;
.el-icon {
margin-bottom: 40%;
font-size: 130%;
line-height: 130%;
}
span {
font-size: 85%;
line-height: 85%;
}
}
}
}
}
.el-upload__tip {
line-height: 18px;
text-align: center;
}
}
</style>