el-upload上传后文件下载和预览

要实现文件上传后的下载和预览功能，你可以使用以下方法：

1. 文件下载：在服务器端，将上传的文件保存到指定的位置，并为该文件生成一个唯一的下载链接。然后，在前端页面上提供一个下载按钮或链接，当用户点击时，使用该链接进行文件下载。

2. 文件预览：对于常见的文档类型（如PDF、Word、Excel等），可以使用相应的插件或库来实现文件预览功能。你可以在前端页面上添加一个预览按钮或链接，当用户点击时，通过插件或库加载并显示文件内容。

以下是一个示例代码，使用 Vue.js 和 Element UI 中的 el-upload 组件来实现文件上传、下载和预览功能：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleUploadSuccess"
      :file-list="fileList"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button slot="tip" size="small" type="success">上传到服务器</el-button>
    </el-upload>
    <el-button v-if="fileList.length > 0" size="small" type="primary" @click="downloadFile">下载文件</el-button>
    <el-button v-if="fileList.length > 0" size="small" type="info" @click="previewFile">预览文件</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      downloadUrl: ''
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 上传成功后，保存服务器返回的下载链接
      this.downloadUrl = response.downloadUrl;
      this.fileList = fileList;
    },
    downloadFile() {
      // 使用保存的下载链接进行文件下载
      window.location.href = this.downloadUrl;
    },
    previewFile() {
      // 在新标签页中打开文件预览链接
      window.open(this.downloadUrl);
    }
  }
};
</script>

在上面的例子中，el-upload 组件通过 action 属性指定了文件上传的接口地址。在服务器端的上传接口中，你需要将文件保存到指定位置，并将下载链接返回给前端。前端通过 handleUploadSuccess 方法获取服务器返回的下载链接，并保存在 downloadUrl 变量中。当用户点击下载按钮时，调用 downloadFile 方法，使用保存的下载链接进行文件下载。当用户点击预览按钮时，调用 previewFile 方法，在新的标签页中打开文件预览链接。

请注意，上传文件和保存到服务器的逻辑需要根据你的具体需求进行实现。此示例仅提供了一个基本的框架，你可以根据需要进行修改和扩展。