vue3的element-ui怎么做上传文件吗，然后有下载功能

在 Vue3 中使用 Element-UI 实现上传和下载文件非常简单。下面是一个简单的示例：

1. 安装 Element-UI 和 axios

npm install element-plus axios

2. 在组件中引入 Element-UI 和 axios

import { ref } from 'vue';
import { ElUpload, ElButton, ElMessage } from 'element-plus';
import axios from 'axios';

3. 在模板中添加上传和下载按钮

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :on-success="handleUploadSuccess"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">上传文件</el-button>
    </el-upload>
    <el-button size="small" type="primary" @click="handleDownload">下载文件</el-button>
  </div>
</template>

4. 在 data 函数中定义上传和下载需要的变量

export default {
  name: 'FileUpload',
  data() {
    return {
      fileList: [],
      uploadUrl: '/api/upload',
      downloadUrl: '/api/download',
    };
  },
  // ...
};

5. 在 methods 中实现上传和下载的逻辑

export default {
  name: 'FileUpload',
  data() {
    return {
      fileList: [],
      uploadUrl: '/api/upload',
      downloadUrl: '/api/download',
    };
  },
  methods: {
    handleUploadSuccess(response) {
      ElMessage.success('上传成功');
    },
    handleDownload() {
      axios({
        method: 'get',
        url: this.downloadUrl,
        responseType: 'blob',
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.xlsx');
        document.body.appendChild(link);
        link.click();
      });
    },
  },
  // ...
};

在这个示例中，我们使用了 `ElUpload` 组件来实现文件上传，使用 `ElButton` 组件来触发上传和下载操作。在上传成功后，会弹出一个提示框。在下载操作中，我们使用了 axios 发送一个 GET 请求来获取文件，然后将文件保存为 Blob 对象，并创建一个链接来下载该文件。

请注意，这只是一个简单的示例，您需要根据自己的需求进行修改和扩展。