Vue实现文件上传和文件下载

Vue实现文件上传和文件下载文件下载:文件下载通常有几种方法1.通过url下载2.location.href3.form提交直接下载4.HTML5a.download结合blob对象进行下载第一种方式:第一种方法是前后端的接口只给了一个API请求:前端第一个实现是使用a标签,第二种方式:这个方法是直接把DataURLs或者BlogURLs传到浏览器地址中触发下载。有两种…

大家好,又见面了,我是你们的朋友全栈君。

文件下载:
文件下载通常有几种方法
1.通过url下载
2.location.href
3.form提交直接下载
4.HTML5 a.download结合blob对象进行下载
第一种方式:
第一种方法是前后端的接口只给了一个API请求:
前端第一个实现是使用a标签,

第二种方式:
这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种方式:

window.location.href = urls; // 本窗口打开下载
window.open(urls, '_blank'); // 新开窗口下载

第三种:
标签的download是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存

      this.content = content
      this.filename = filename
      const blob = new Blob([this.content])
      if (window.navigator.msSaveOrOpenBlob) {
        // 兼容IE10
        navigator.msSaveBlob(blob, this.filename)
      } else {
        //  chrome/firefox
        let aTag = document.createElement('a')
        aTag.download = this.filename
        aTag.href = URL.createObjectURL(blob)
        aTag.click()
        URL.revokeObjectURL(aTag.href)
      }

第四种form表单
不需要我们处理返回二进制流直接下载,非常方便
form的action设置为接口地址,method设置为post,Post到后台的数据设置为input的属性 name = key,value = value的形式,如果有多个key、value的值要传递,那么就设置多个input来分别储存单个的key、value;
如果请求的接口可以不需要参数,那么input还是必须要一个,如果不要得话 会引起接口报错
原理:form的action相当于一个浏览器本页签/页面的一个请求,不会被后台,前台的路由拦截。所以能够提交成功。

注意点:如果设置method为get,在action中的uri添加了参数的话,想用这个参数替代input的key、value形式来提交到后台,这参数是没有效果的,后台拿不到这些参数,真正的参数还是以input的name、value的形式储存,在submit方法执行后传递到后台。
这样我们就是实现了文件下载,但是表单提交的数据一般是简单的键值对,如果传参比较复杂可以考虑将表单序列化提交。

因为项目是基于vue的,而且提交的请求参数涉及很多参数,比较复杂,所以采用了方法三来实现

      axios.post('/rest/inventory/oh_status/info/excel', {
        site: this.selectedsite,
        bu: this.selectedbu,
        ohHealthStatus: this.selectedtitle,
        ohHealthRootcause: this.selectedblock,
        search: this.search,
        sort: this.sort
      }, {responseType: 'arraybuffer'}).then(this.ExportFile).catch(function (error) {
        console.log(error)
      })

     this.content = content
      this.filename = filename
      const blob = new Blob([this.content])
      if (window.navigator.msSaveOrOpenBlob) {
        // 兼容IE10
        navigator.msSaveBlob(blob, this.filename)
      } else {
        //  chrome/firefox
        let aTag = document.createElement('a')
        aTag.download = this.filename
        aTag.href = URL.createObjectURL(blob)
        aTag.click()
        URL.revokeObjectURL(aTag.href)
      }

注意我们发送请求的时候一定要写上responseType,{responseType: 'arraybuffer'} 否则下载下来的文件打不开!!!

文件上传
文件上传通常使用form表单,但是有时候我们不想要用表单,ES6的fromData来实现

    handleGetFile (data) {
      this.file = data
      let formdata = new FormData()
      formdata.append('file', this.file)
      formdata.append('submit', false)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('/rest/master_data/ct2r/odin_delivery_metrics/cvc/file_upload_review', formdata, config).then(this.sendFileSucc)
    },

首先 我们获取完文件之后,创建FormData对象,配置头部,发送该请求就OK了,别忘了让后台将接收头部请求改为formdata的格式

如果文件是图片或者视频的话,部分浏览器会直接打开,非下载,这个时候我们可以在下载链接 url 后面加上 ?response-content-type=application/octet-stream 这个参数可以实现点击下载功能。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159903.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 公有云和私有云的对比和区别「建议收藏」

    公有云和私有云的对比和区别「建议收藏」什么是云?云技术是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来,实现数据的计算、储存、处理和共享的一种托管技术。例如云计算:将计算作为一种服务交付给用户而不是一种产品,在这种服务中,计算资源、软件和信息如同日常的水、电一样通过互联网交付给计算机和其他的计算媒介。​云计算的三种模式​按照商业模式的不同,云计算可以被分为三大类:公有云、私有云和混合云。这三种模式构成了云基础设施构建和消费的基础。​​1、公有云(PublicClouds),“公有”反映了这类云服务并非用户

  • 想要复制网页的文字网页不让复制_如何复制文字

    想要复制网页的文字网页不让复制_如何复制文字作者:iamlaosong当我们需要复制网页上的内容时,往往会碰到不能复制的情况,面对这个问题,不同的情况有不同的应对方法,比如禁止JavaScript运行,查看源代码,另存为网页文件等。这些方法也可以用,现在有个更通用的办法是QQ屏幕截图所带的功能,不管网页用的什么技术,能看见就可以复制,特别适合不太懂技术的人。要用QQ截图功能,QQ肯定是要登录的,然后用浏览器打开需要复制文字的网页,按QQ屏幕截图快捷键Ctrl+Alt+A选择需要复制文字的区域,在弹出的菜单中点击“翻译”或者“屏幕识图”两个按钮

    2022年10月12日
  • gridlayout java_Java GridLayout

    gridlayout java_Java GridLayoutJavaGridLayout1JavaGridLayout的介绍GridLayout用于将组件排列在矩形网格中。每个矩形中显示一个组件。2JavaGridLayout的构造方法构造方法描述GridLayout()创建一个网格布局,其中每个组件一行一行。GridLayout(introws,intcolumns)使用给定的行和列创建网格布局,但组件之间没有间隙。GridLayout(…

  • 微信集赞作弊_朋友圈分享集赞是非法行为吗

    微信集赞作弊_朋友圈分享集赞是非法行为吗从古至今,无论是征战沙场的猛将,还是心怀天下的文豪,抑或探索人生真理的大哲学家,都将“独立、自由”等当做人之所以为人的奋斗目标和根本标准。但可惜的是,无论是外来环境、文化的影响,还是内在的个人成长过程,都缺乏对“独立、自由”的尊重和支撑。而在当下的移动互联网时代,以微信为代表的社交应用,更是在某种程度上扼杀着大众的独立和自由。虽然这并不是微信有意去做…

  • ESP8266学习笔记1:怎样在安信可全功能測试板上实现ESP-01的编译下载和调试[通俗易懂]

    ESP8266学习笔记1:怎样在安信可全功能測试板上实现ESP-01的编译下载和调试

  • nivicat15 激活码[在线序列号]

    nivicat15 激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号