Element 图片上传组件封装

在项目目中遇到图书一张或多张图片上传的时候可以直接调用该组件（如使用的是oss上传，需要对上传进行修改）

组件全代码

<template>
	<div :class="['img-one-upload', { success: fileList.length == limit }]">
		<el-upload
			:limit="limit"                          // 传入的最大数量限制
			:file-list="fileList"                   // 上传图片的数组
			:on-preview="handlePictureCardPreview"  // 预览图片的调用方法
			:headers="headers"                      // 请求头的配置
			accept=".jpg,.jpeg,.png,.gif, .svg"     // 格式限制
			:action="`${basesURL}${url}`"           // 请求地址，更具自己情况来配置！重点
			@success="success"                      // 请求调用成功回调
			@remove="remove"                        // 请求调用失败回调
			:on-exceed="handleExceed"               // 超出校验回调
			list-type="picture-card"                // 文件列表的类型
		>
			<el-icon><Plus /></el-icon>
		</el-upload>
	</div>
	<el-dialog v-model="dialogVisible">
		<img w-full :src="dialogImageUrl" alt="Preview Image" />
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Local } from '/@/utils/storage'; // 获取请求头
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

const emit = defineEmits(['update:value']); // 传入需要获取的数据
const props = defineProps({
    value: { type: Object, default: () => [] },
	// 图片数量限制
	limit: {
		type: Number,
		default: 5,
	},
    // 传入需要上传的接口地址
	url: {
		type: String,
		default: 'erp-crm/s3/upload-file',
	},
});
const basesURL = import.meta.env.VITE_API_URL as any; // 接口头部获取
const imgPath = 'https://*********.com'; // 图片格式配置这里更具自己的情况来
const headers = {
	token: Local.get('token'),    // 获取token当请求头
};
const fileList = ref<any>([]);    // 组件内的图片上传的数组
const dialogImageUrl = ref('');   // 预览时展示图片的地址
const dialogVisible = ref(false); // 预览弹窗控制字段

// 超出规则校验
const handleExceed = (files: any, fileList: any) => {
	if (files.length + fileList.length > 1) {
		ElMessage.error('最多上传一张图片');
	}
};

// 预览
const handlePictureCardPreview = (file: any) => {
	dialogVisible.value = true;
	dialogImageUrl.value = file.url;
};

// 上传成功
const success = (res: any) => {
	if (res.code == 200) {
		fileList.value.push({ url: res.data.includes('http') ? res.data : `${imgPath}/${res.data}`, name: res.data });
		emit('update:value', fileList.value); // 给更改完成的数据返给传入的数组
	}
};

// 删除
const remove = (res: any) => {
	fileList.value = fileList.value.filter((m: any) => m.url !== res.response.data);
	emit('update:value', fileList.value);
};

// 打开获取传入数据，用与默认展示
const unpack = () => {
	fileList.value = [];
	props.value
		? props.value.forEach((m: any) => fileList.value.push({ url: m.url.includes('http') ? m.url : `${imgPath}/${m.url}`, name: m.name }))
		: [];
};

defineExpose({ unpack }); // 传出组件出现时应调用的方法
</script>

<style>
.img-one-upload.success .el-upload--picture-card {
	display: none;
}
</style>

外部调用

// 引入
<script lang="ts" setup>
import ImageUploadFile from '@/具体位置/index.vue';

// 此组件中 fileListImg 传入的数据结构应为 [{url:"*****",name:"****"}]
const fileListImg = ref([] as any); // 创建用于获图片的数组

const ImageUploadFileRef = ref(); // 用于获取组件放回调用方法的ref

</script>

// 使用
<template>

// limit 最大传入值
<ImageUploadFile ref={ImageUploadFileRef} limit={1} v-model:value={fileListImg.value} />

</template>

如有需要通过接口获取默认数据 可以在调用接口获取到数据后 调用 ImageUploadFileRef.value.unpack(); 方法显示默认存在图片