vue3ElUpload上传 token获取

在Vue3中，`Element-Plus`库的`el-upload`组件是一个用于文件上传的功能模块。如果你需要在上传文件时发送一个包含token的请求，通常是在用户登录后服务器返回的一个有效令牌，可以按照以下步骤操作：

1. 安装依赖：
首先，你需要安装`element-plus`和axios库，它们分别是UI组件库和HTTP客户端库。你可以通过npm或yarn进行安装：

   npm install element-plus axios
   或
   yarn add element-plus axios

2. 设置上传配置：
在你的Vue组件中，创建一个`upload`对象，并设置`before-upload`钩子来检查是否有有效的token。这通常会在每次上传前检查当前用户的登录状态。

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="checkToken"
    ref="upload"
    :http-request="handleRequest"
    // 其他上传配置...
  ></el-upload>
</template>

<script setup>
import { ElUpload } from 'element-plus';
import axios from 'axios';

const uploadUrl = '/api/upload'; // 你的上传API地址
let token;

// 检查是否有token
async function checkToken(file) {
  if (!token) {
    const response = await axios.get('/getToken'); // 获取token的API
    if (response.data.success) {
      token = response.data.token;
    } else {
      alert('请先登录获取token');
      return false; // 中断上传
    }
  }
  
  // 返回true继续上传，否则返回false中断上传
  return true;
}

function handleRequest(config) {
  config.headers.Authorization = `Bearer ${token}`; // 添加token到header
  return config;
}
</script>