vue3中使用el-upload，并自定义下载方法

在Vue 3中使用el-upload组件可以通过自定义action属性来指定上传文件的后端接口，但是它默认的下载方法是直接调用浏览器的下载功能。如果需要自定义下载方法，可以在el-upload的on-success事件中获取到上传成功后的文件信息，并使用自定义的下载方法进行下载。

具体步骤如下：

1. 在el-upload组件中添加on-success事件和ref属性，ref属性用于在组件中获取el-upload实例。

<el-upload
  action="/api/upload"
  :on-success="handleSuccess"
  ref="upload"
>
  <el-button>上传文件</el-button>
</el-upload>

2. 在组件的methods中定义handleSuccess方法，在该方法中获取上传成功后的文件信息，并存储到data中。

methods: {
  handleSuccess(response, file, fileList) {
    this.fileList = fileList;
    this.fileUrl = response.data.url; // 上传成功后的文件地址
  }
}

3. 在需要下载文件的地方定义自定义的下载方法，例如使用axios进行下载。

methods: {
  downloadFile() {
    axios.get(this.fileUrl, { responseType: 'blob' })
      .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename'); // 设置文件名
        document.body.appendChild(link);
        link.click();
      });
  }
}

4. 在需要调用下载方法的地方获取el-upload实例，并使用其$refs属性获取上传成功后的文件信息，并调用自定义的下载方法进行下载。

methods: {
  handleSuccess(response, file, fileList) {
    this.fileList = fileList;
    this.fileUrl = response.data.url; // 上传成功后的文件地址
  },
  downloadFile() {
    const uploadInstance = this.$refs.upload;
    const file = uploadInstance.fileList[0]; // 获取上传成功后的文件信息
    if (file) {
      this.fileUrl = file.url; // 获取文件地址
      // 调用自定义的下载方法
      this.downloadFile();
    }
  }
}

这样就可以在Vue 3中使用el-upload组件，并自定义下载方法了。