el-upload 上传、预览、和下载_el-upload预览文件-程序员宅基地

技术标签：前端 vue.js 写后管遇到的问题以及解决办法 javascript

最近碰到个需求是上传文件点击预览和下载。恰好我没写过这方面的，让我纠结了好久啊

1.上传（采用的是自定义上传方式）

使用：http-request

 <el-upload
          ref="upload"
          :limit="1"
          action="string"
          :http-request="fileRequest"
          :before-remove="handleRemove"
          :on-exceed ="handleExceed"
        >
          <el-button slot="trigger" size="small" type="primary" >上传附件</el-button>
        </el-upload>
          <div v-for="(file ,index) in fileList" :key="index" class="file-list">
            <span>{
   {file.name}} </span> 
           <div>
            <el-button  type="text" size="small" @click="handlePreview(file)">预览</el-button>
            <el-button type="text" size="small" style="color: red;" @click="handleRemove(file)">删除</el-button>
           </div>
        </div>

因为下面的文件显示是自定义的我就把el-upload自带的隐藏了

::v-deep .el-upload-list{
  display: none;
}
.file-list{
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
  margin-top: 10px;
}

文件上传的代码接口返回的是一个文件路径所以我就得自己切出来文件名

fileRequest(file){
      let formData = new FormData();
      formData.append("file", file.file); 
      uploadFileApi(formData).then(res=>{
        this.$message.success(res.msg);
        this.url = res.data.fileUrl;
        this.fileList.push({
          name:file.file.name,
          url:this.url
        })
      })
    },

2.预览直接用的window.open()

    handlePreview(file) {
      try {
        window.open("http://"+file.url, '_blank')
      } catch (error) {
        this.$message.error('解析路径失败！');
      }
      
    },

3.下载

我在这块做了好久啊主要是一直想的是直接有url了可以直接下载但是后来发现下载的文件显示错误

最后变成了请求接口下载后端返回文件流

文件流的长相~ 就是这个死样子然后因为没返回code ! 拦截器直接拦截了

最后的代码：

 handleUpload(file) {
      let fileName = file.fileName;//文件名
      let url = '/api/file/download?fileName='+fileName ;
      const x = new window.XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.setRequestHeader('token', getToken())
      x.onload = () => {
      const url = window.URL.createObjectURL(x.response);
      const a = document.createElement("a");
      a.href = url;
      a.target = "_blank";
      a.download = fileName;
      a.style.display = "none";
      document.body.append(a);
      a.click();
      };
      x.send();
    },

记录一下昨天下午+晚上的成果省的自己哪天用到的时候找不到~

本文链接：https://blog.csdn.net/weixin_42468316/article/details/132466162

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp