el-upload 打开文件或图片链接 预览、下载

第一种 :直接url 方式
第二种 : onlyoffice插件

handlePreviewAppendix(file) {
      console.log("handlePreview", file);
      //  window.location.href = file.fileUrl
       window.open(file.fileUrl, '_blank');
      // this.$router.push({
      //   path: "/preview",
      //   query: {
      //     id: file.fileId,
      //     suffix: file.fileSuffix,
      //     fileName: file.fileName,
      //     src: file.fileUrl,
      //   },
      // });
    },
```![在这里插入图片描述](https://img-blog.csdnimg.cn/ef999f8d3ca747328b663e6160f7eb91.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/1ee56a82b374473bb73901fd7fea251f.png)


![在这里插入图片描述](https://img-blog.csdnimg.cn/bacf9c903d3644dca6a3f951af5c6872.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e86fef068d30485eb8931c3222fd096a.png)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现文件上传后的下载预览功能,你可以使用以下方法: 1. 文件下载:在服务器端,将上传的文件保存到指定的位置,并为该文件生成一个唯一的下载链接。然后,在前端页面上提供一个下载按钮或链接,当用户点击时,使用该链接进行文件下载。 2. 文件预览:对于常见的文档类型(如PDF、Word、Excel等),可以使用相应的插件或库来实现文件预览功能。你可以在前端页面上添加一个预览按钮或链接,当用户点击时,通过插件或库加载并显示文件内容。 以下是一个示例代码,使用 Vue.js 和 Element UI 中的 el-upload 组件来实现文件上传、下载预览功能: ```html <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 方法,在新的标签页中打开文件预览链接。 请注意,上传文件和保存到服务器的逻辑需要根据你的具体需求进行实现。此示例仅提供了一个基本的框架,你可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vivk2017

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值