element-plus el-upload简单自定义上传组件

先上效果图

<template>
	<div>
		<el-upload class="el-upload-style"
			:class="{ active: state.fileLength == state.maxFileLength, mright: state.mRight }" :action="state.baseUrl"
			list-type="picture-card" :limit="state.limits" :on-exceed="onExceed" :data="state.uploadData"
			:on-progress="beforeUpload" :on-success="handleuploadSuccess" multiple>
			<template #default>
				<div class="content-img-default">
					<div class="icon-default">
						<div class="icon-default-teo-img">
							<img src="../../assets/upload.png" />
						</div>
						<div class="icon-default-teo-text">
							{{ state.uploadTitle }}{{ state.fileLength }}/{{ state.maxFileLength }}</div>
					</div>
				</div>
			</template>
			<template #file="{ file }">
				<div class="content-img">
					<el-image class="el-upload-list__item-thumbnail" style="width: 100%;" :src="file.url" fit="contain"></el-image>
				</div>
			</template>
		</el-upload>
	</div>
</template>
<script lang="ts">
	import {
		getCurrentInstance,
		reactive,
		defineComponent
	} from "vue";
	import {
		ElMessage
	} from "element-plus";
	import {
		handleBaseURL
	} from "@/utils/config";
	export default defineComponent({
		name: "Cuploads",
		props: {
			maxFileLength: {
				// 上传最大的个数
				type: Number,
				required: false,
				default: 3
			},
			uploadData: {
				// 上传的携带参数
				type: Object,
				required: false,
				default: {
					type: 13
				}
			},
			uploadTitle: {
				//上传的标题
				type: String,
				required: false,
				default: "产品正视图"
			},
			uploadIcon: {
				//上传的iocn图
				type: String,
				required: false,
				default: "custom-icon-hemo"
			},
			limits: {
				//最大允许上传个数 (默认3)
				type: Number,
				required: false,
				default: 3
			},
			mRight: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		setup: (props, { emit }) => {
			// 定义字段
			const { maxFileLength, uploadData, uploadTitle, uploadIcon, limits, mRight } = props;
			const state = reactive({
				maxFileLength,
				uploadData,
				uploadTitle,
				uploadIcon,
				limits,
				mRight,

				imgUrl: "",
				loading: false,
				baseUrl: handleBaseURL() + "admin/file/image/upload", //上传的路径;
				dialogImageUrl: "",
				dialogVisible: false,
				disabled: false,
				fileLength: 0,
			});

			// 方法==================>
			const beforeUpload = (event, file, fileList) => {
				console.log(event)
				console.log(file)
				console.log(fileList)
			};
			const onExceed = (files, fileList) => {
				console.log("文件超出个数限制时的钩子", files);
				console.log("文件超出个数限制时的钩子", fileList);
				ElMessage.error({
					message: "图片超出个数",
					type: "error"
				});
			};
			// const emit = defineEmits(["uploadSuccess"]);
			const handleuploadSuccess = (response, file, fileList) => {
				state.fileLength = fileList.length;
				emit("uploadSuccess", response.data);
			};

			const handleRemove = file => {
				console.log(file);
			};
			const handlePictureCardPreview = file => {
				state.dialogImageUrl = file.url;
				state.dialogVisible = true;
			};
			const handleDownload = file => {
				console.log(file.url);
			};

			return {
				state,
				onExceed,
				handleuploadSuccess,
				handleRemove,
				handlePictureCardPreview,
				handleDownload,
				beforeUpload
			}
		}
	})
</script>

<style lang="scss" scoped>
	.el-upload-list__item-thumbnail {
		height: 180px;
	}

	.content-img-default {
		width: 100%;
		border: 1px dashed #C0CCDA;
		border-radius: 10px;

		.icon-default {
			width: 100%;
			height: 180px;
		}

		.icon-default-teo-img {
			height: 150px;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 90px;
				height: 90px;
			}
		}

		.icon-default-teo-text {
			color: #808080;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 0px;
		}
	}

	::v-deep(.active .el-upload) {
		display: none !important;
	}

	::v-deep(.mright .el-upload-list li) {
		margin-right: 20px !important;
	}

	// 修改element-ui样式
	.el-upload-style {
		// display: flex;
		// box-sizing: border-box;
		// flex-wrap: wrap;
		margin-bottom: 20px;
	}

	::v-deep(.el-upload-style .el-upload-list) {
		// display: flex;
		// flex-wrap: wrap;
	}

	::v-deep(.el-upload-style .el-upload-list li) {
		margin-right: 20px;
	}

	::v-deep(.el-upload-style .el-upload-list .el-upload-list__item) {
		width: 200px;
		height: 200px;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0px 4px 10px 0px rgba(4, 0, 0, 0.2);
		border-radius: 10px;
		padding: 10px;
		// display: flex;
		// justify-content: center;
		// align-items: center;
	}

	::v-deep(.el-upload-style .el-upload) {
		width: 200px;
		height: 200px;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0px 4px 10px 0px rgba(4, 0, 0, 0.2);
		border-radius: 10px;
		padding: 10px;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		border: none;
		box-sizing: border-box;
	}

	::v-deep(.el-upload-style .el-upload i) {
		font-size: 90px;
		border: 1px dashed #d9d9d9;
		color: #8c939d;
		// padding: 44px;
		border-radius: 10px;
		background: #fbfdff;
	}

	// --------

	.el-upload {
		background: #fbfdff;
	}

	.upload-img {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.upload-text {
			// width: 100%;
			// text-align: center;
			font-size: 18px;
			font-family: FZHei-B01S;
			font-weight: 400;
			color: #808080;
		}

		.content {
			box-sizing: border-box;

			.upload-first {
				.icon {
					width: 100%;
					height: 100%;
					border: 1px dashed #c0ccda;
					background: #fbfdff;
					border-radius: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.icon-style-first {
		font-size: 160px;
		color: #929292;
	}

	.upload-text {
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-family: FZHei-B01S;
		font-weight: 400;
		color: #808080;
	}

	.el-loading-spinner {
		//loading位置
		margin-top: -44%;
	}

	.portal-main-common.g-main-upload {
		width: 178px;
		height: 178px;
		line-height: 178px;

		.avatar-uploader {
			width: 100%;
			height: 100%;
		}

		.el-upload {
			width: 100%;
			height: 100%;
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 100%;
			height: 100%;
			line-height: 100%;
			text-align: center;
		}

		.avatar {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
</style>