当前位置：首页 > article >正文

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

article 2025/1/4 6:24:18

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

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

<template>
  <el-upload
    action=""
    :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 或 fetch
  setTimeout(() => {
    // 假设上传成功
    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>

在这个示例中：