Element plus 的 upload 组件实现自定义上传

Element Plus 是一个基于 Vue 3 的 UI 组件库，提供了许多常用的 UI 组件。其中，Upload 组件用于文件上传功能。如果你想实现自定义上传逻辑，可以通过 before-upload 和 http-request 属性来实现。

以下是一个简单的示例，展示如何使用 Element Plus 的 Upload 组件实现自定义上传：

<template><el-uploadaction="":before-upload="beforeUpload":http-request="customUpload":on-success="handleSuccess":on-error="handleError"><el-button slot="trigger" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>
</template><script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';const beforeUpload = (file) => {const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';const isLt2M = file.size / 1024 / 1024 < 0.5;if (!isJPG) {ElMessage.error('上传头像图片只能是 JPG/PNG 格式!');return false;}if (!isLt2M) {ElMessage.error('上传头像图片大小不能超过 500KB!');return false;}return true;
};const customUpload = ({ file, onSuccess, onError }) => {const formData = new FormData();formData.append('file', file);uploadFunc() // 调用你的自定义方法进行上传
};// 你的自定义上传方法
const uploadFunc = ()=>{// 模拟一个异步请求，例如使用 axios 或 fetchsetTimeout(() => {// 假设上传成功ElMessage.success('上传成功');// 如果上传失败，可以调用 onError// ElMessage.error('上传失败');}, 1000);
}const handleSuccess = (response, file, fileList) => {console.log('上传成功', response, file, fileList);
};const handleError = (err, file, fileList) => {console.log('上传失败', err, file, fileList);
};
</script>

在这个示例中：

• before-upload 属性用于在文件上传之前进行一些验证操作。如果返回 false，则不会继续上传。
• http-request 属性用于自定义上传逻辑。你可以在这里实现自己的上传逻辑，比如使用 axios 或 fetch 发送请求。
• on-success 和 on-error 属性分别用于处理上传成功和失败的回调。

通过这种方式，你可以完全控制文件上传的过程，并根据需要实现自定义的逻辑。