element-plus 文件上传教程

<template>
  <el-upload
    class="upload-demo"
    :auto-upload="true"
    :http-request="customUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">自定义上传</el-button>
  </el-upload>
</template>

<script setup>
import axios from 'axios';

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.error('只能上传JPG格式文件！');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('文件大小不能超过2MB！');
    return false;
  }
  return true;
};

const customUpload = async ({ file, onProgress, onSuccess, onError }) => {
  const formData = new FormData();
  formData.append('file', file); // 添加文件到FormData

  try {
    const response = await axios.post('https://your-server-api/upload', formData, {
      headers: { 'Authorization': 'Bearer your-token' }, // 添加鉴权头
      onUploadProgress: (progressEvent) => {
        const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        onProgress({ percent }); // 更新进度条
      }
    });
    onSuccess(response.data); // 通知组件上传成功
  } catch (error) {
    onError(error); // 通知组件上传失败
  }
};

const handleSuccess = (response, file, fileList) => {
  ElMessage.success('上传成功');
};

const handleError = (error, file, fileList) => {
  ElMessage.error('上传失败');
};
</script>