增加多个图片上传组件

src/components/Upload/Image.vue

@@ -71,8 +71,8 @@ interface UploadFileProps {
 	width?: string; // 组件宽度 ==> 非必传（默认为 150px）
 	borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
 	iconSize?: number;
-  dir?: string; // 文件目录
-  listType:string;
+	dir?: string; // 文件目录
+	listType: string;
 }
 
 // 接受父组件参数
@@ -86,8 +86,8 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
 	height: '150px',
 	width: '150px',
 	borderRadius: '8px',
-  dir: '',
-  listType:''
+	dir: '',
+	listType: '',
 });
 
 // 生成组件唯一id

src/components/Upload/Images.vue

@@ -0,0 +1,296 @@
+<template>
+	<div class="upload-box">
+		<el-upload
+			ref="elUploadRef"
+			list-type="picture-card"
+			:class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+			:on-preview="handlePictureCardPreview"
+			: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-upload>
+		<div class="el-upload__tip">
+			<slot name="tip"></slot>
+		</div>
+		<el-dialog v-model="dialogVisible">
+			<img 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';
+
+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）
+}
+const props = withDefaults(defineProps<UploadFileProps>(), {
+	imageUrls: '',
+	uploadFileUrl: '/admin/sys-file/upload',
+	drag: true,
+	disabled: false,
+	fileSize: 5,
+	fileType: () => ['image/jpeg', 'image/png', 'image/gif'],
+	height: '150px',
+	width: '150px',
+	borderRadius: '8px',
+});
+
+interface UploadEmits {
+	(e: 'update:imageUrls', value: string): void;
+}
+const emit = defineEmits<UploadEmits>();
+
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);
+const elUploadRef = ref();
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+
+// 上传
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+	let formData = new FormData();
+	formData.append('file', options.file);
+	try {
+		const res = await request({
+			url: props.uploadFileUrl,
+			method: 'post',
+			headers: {
+				'Content-Type': 'multipart/form-data',
+			},
+			data: formData,
+		});
+		if (res.code == 0) {
+			return res;
+		}
+	} catch (error) {
+		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 = 'http://123.156.230.15:8089/api' + uploadFile.response.data.url;
+	dialogVisible.value = true;
+};
+
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+	return props.disabled || formContext?.disabled;
+});
+
+watch(
+	() => props.imageUrls,
+	(newValue) => {
+		console.log(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);
+	if (!imgType)
+		ElNotification({
+			title: '温馨提示',
+			message: '上传图片不符合所需的格式！',
+			type: 'warning',
+		});
+	if (!imgSize)
+		setTimeout(() => {
+			ElNotification({
+				title: '温馨提示',
+				message: `上传图片大小不能超过 ${props.fileSize}M！`,
+				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);
+
+	ElNotification({
+		title: '温馨提示',
+		message: '图片上传成功！',
+		type: 'success',
+	});
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+	ElNotification({
+		title: '温馨提示',
+		message: '图片上传失败，请您重新上传！',
+		type: 'error',
+	});
+};
+</script>
+
+<style scoped lang="scss">
+.is-error {
+	.upload {
+		:deep(.el-upload),
+		:deep(.el-upload-dragger) {
+			border: 1px dashed var(--el-color-danger) !important;
+			&:hover {
+				border-color: var(--el-color-primary) !important;
+			}
+		}
+	}
+}
+:deep(.disabled) {
+	.el-upload,
+	.el-upload-dragger {
+		cursor: not-allowed !important;
+		background: var(--el-disabled-bg-color);
+		border: 1px dashed var(--el-border-color-darker) !important;
+		&:hover {
+			border: 1px dashed var(--el-border-color-darker) !important;
+		}
+	}
+}
+.upload-box {
+	overflow: hidden;
+
+	.no-border {
+		:deep(.el-upload) {
+			border: none !important;
+		}
+	}
+	:deep(.upload) {
+		.el-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: v-bind(width);
+			height: v-bind(height);
+			overflow: hidden;
+			border: 1px dashed var(--el-border-color-darker);
+			border-radius: v-bind(borderRadius);
+			transition: var(--el-transition-duration-fast);
+			&:hover {
+				border-color: var(--el-color-primary);
+				.upload-handle {
+					opacity: 1;
+				}
+			}
+			.el-upload-dragger {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100%;
+				padding: 0;
+				overflow: hidden;
+				background-color: transparent;
+				border: 1px dashed var(--el-border-color-darker);
+				border-radius: v-bind(borderRadius);
+				&:hover {
+					border: 1px dashed var(--el-color-primary);
+				}
+			}
+			.el-upload-dragger.is-dragover {
+				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>

src/components/index.ts

@@ -4,6 +4,7 @@ import DictTag from '/@/components/DictTag/index.vue';
 import UploadExcel from '/@/components/Upload/Excel.vue';
 import UploadFile from '/@/components/Upload/index.vue';
 import UploadImg from '/@/components/Upload/Image.vue';
+import UploadImgs from '/@/components/Upload/Images.vue';
 import DelWrap from '/@/components/DelWrap/index.vue';
 import Editor from '/@/components/Editor/index.vue';
 import Tip from '/@/components/Tip/index.vue';
@@ -12,12 +13,12 @@ import SvgIcon from '/@/components/SvgIcon/index.vue';
 
 // 第三方组件
 import ElementPlus from 'element-plus';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import 'element-plus/dist/index.css';
-import {Pane, Splitpanes} from 'splitpanes';
+import { Pane, Splitpanes } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 // 日历组件
-import {setupCalendar} from 'v-calendar';
+import { setupCalendar } from 'v-calendar';
 // @ts-ignore 引入VForm3库
 import VForm3 from 'form-designer-plus'; //
 import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式
@@ -25,36 +26,36 @@ import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式
 import vue3TreeOrg from 'vue3-tree-org';
 import 'vue3-tree-org/lib/vue3-tree-org.css';
 
-
 // 导入声明
-import {App} from "vue";
+import { App } from 'vue';
 
 export default {
-    install(app: App) {
-        app.component('DictTag', DictTag);
-        app.component('Pagination', Pagination);
-        app.component('RightToolbar', RightToolbar);
-        app.component('uploadExcel', UploadExcel);
-        app.component('UploadFile', UploadFile);
-        app.component('UploadImg', UploadImg);
-        app.component('Editor', Editor);
-        app.component('Tip', Tip);
-        app.component('DelWrap', DelWrap);
-        app.component('TagList', TagList);
-        app.component('SvgIcon', SvgIcon);
+	install(app: App) {
+		app.component('DictTag', DictTag);
+		app.component('Pagination', Pagination);
+		app.component('RightToolbar', RightToolbar);
+		app.component('uploadExcel', UploadExcel);
+		app.component('UploadFile', UploadFile);
+		app.component('UploadImg', UploadImg);
+		app.component('UploadImgs', UploadImgs);
+		app.component('Editor', Editor);
+		app.component('Tip', Tip);
+		app.component('DelWrap', DelWrap);
+		app.component('TagList', TagList);
+		app.component('SvgIcon', SvgIcon);
 
-        // 导入全部的elmenet-plus的图标
-        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-            app.component(key, component)
-            // 兼容性
-            app.component(`ele-${key}`, component)
-        }
-        // 导入布局插件
-        app.component('Splitpanes', Splitpanes);
-        app.component('Pane', Pane);
-        app.use(ElementPlus) // ELEMENT 组件
-        app.use(setupCalendar, {}) // 日历组件
-        app.use(VForm3) // 表单设计
-        app.use(vue3TreeOrg) // 组织架构组件
-    }
-}
+		// 导入全部的elmenet-plus的图标
+		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+			app.component(key, component);
+			// 兼容性
+			app.component(`ele-${key}`, component);
+		}
+		// 导入布局插件
+		app.component('Splitpanes', Splitpanes);
+		app.component('Pane', Pane);
+		app.use(ElementPlus); // ELEMENT 组件
+		app.use(setupCalendar, {}); // 日历组件
+		app.use(VForm3); // 表单设计
+		app.use(vue3TreeOrg); // 组织架构组件
+	},
+};