element ui 文件下载

Element UI 的 `el-upload` 组件允许通过 `on-preview` 钩子来实现文件预览和下载功能。当用户点击文件列表中的某个已上传文件时，你可以触发下载操作。下面是一个简单的示例：

首先，在模板中设置文件列表并监听 `on-preview` 事件：

<template>
  <el-upload
    :action="uploadUrl"
    :on-preview="(file) => handlePreview(file)"
    ...
  >
    <!-- 其他配置 -->
  </el-upload>

  <div v-if="previewVisible">
    <!-- 下载按钮或其他下载操作展示 -->
    <button @click="downloadFile">下载</button>
  </div>
</template>

然后，在组件内定义 `handlePreview` 和 `downloadFile` 方法：

<script>
export default {
  data() {
    return {
      previewVisible: false,
      fileToDownload: null, // 保存要下载的文件信息
    };
  },
  methods: {
    handlePreview(file) {
      this.previewVisible = true;
      this.fileToDownload = file; // 存储文件信息以便后续下载
    },
    
    downloadFile() {
      const downloadLink = this.$http.get(file.url); // 假设你有一个HTTP请求库如axios
      downloadLink.then(response => {
        const link = document.createElement('a');
        link.href = response.data.downloadUrl; // 如果下载链接在服务器响应中提供
        link.download = file.name;
        link.click();
      });
    },
  },
};
</script>

请注意，这里假设你有 `$http` 或类似的方法来进行 HTTP 请求，实际应用中可能需要替换为你的具体网络请求方式。