Vue文件上传、下载

Vue文件上传、下载代码示例:文件上传到接口,对接口返回的文件进行下载。<template><divclass=”hello”><h1>{{msg}}</h1><inputtype=”file”@change=”uploadFile($event)”accept=”.sql,.excel,.txt”/></div></template><script>exportdefau

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

代码示例:文件上传到接口,对接口返回的文件进行下载。

<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
    <input type="file" @change="uploadFile($event)" accept=".sql,.excel,.txt"/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    uploadFile: function (event) {
      //将接收到的文件以表单形式post到接口
      let file = event.target.files[0];
      let formData = new FormData();
      formData.append('file', file);
      let config = {
        headers: {'Content-Type': 'multipart/form-data'},//文件上传配置
        responseType:'arraybuffer'//文件下载配置
      }
      this.$axios
          .post('/api/action/sql_to_word', formData, config)//进行了跨域代理
          .then((response => {
            //对返回的文件流进行下载
            let url = window.URL.createObjectURL(new Blob([response.data])) //创建下载链接
            let link = document.createElement('a') //创建a标签
            link.style.display = 'none'  //将a标签隐藏
            link.href = url  //给a标签添加下载链接
            link.setAttribute('download', 'abc.docx') // 此处注意,要给a标签添加一个download属性,属性值就是文件名称 否则下载出来的文件是没有属性的,空白白
            document.body.appendChild(link)
            link.click()  //执行a标签
          }))
    }
  }
}
</script>

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

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

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

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

(0)


相关推荐

  • 业务安全(逻辑漏洞)

    业务安全(逻辑漏洞)文章目录业务安全概述黑客攻击的目标业务安全测试流程测试准备业务调研业务建模业务流程梳理业务风险点的识别开展测试撰写报告业务数据安全商品支付金额篡改前端JS限制绕过验证请求重放测试业务上限测试商品订购数量篡改damiCMSV5.1为例密码找回安全验证码客户端回显测试验证码暴力破解Response状态值修改测试Session覆盖弱token设计缺陷测试密码找回流程绕过测试接口参数账号修改metinfoV4.0为例业务安全概述近年来,随着信息化技术的迅速发展和全球一体化进程的不断加快,计算机和网

  • SpringBoot跨域设置(CORS)「建议收藏」

    SpringBoot跨域设置(CORS)「建议收藏」目录什么是跨域跨域资源共享(CORS)1.简单请求2.非简单请求SpringBoot设置CORS1.配置过滤器CorsFilter2.实现接口WebMvcConfigurer3.使用注解@CrossOrigin什么是跨域请求url的协议、域名、端口三者有任意一个不同即为跨域。跨域问题是因为浏览器的同源策略的限制而产生的。同源:请求url的协议、域名、端口三者都相同即为同源(同一个域)。同源策略:同源策略(Sameoriginpolicy)是一种约定,他是浏览器最核心也最基本的安全

  • vb编程入门_python编程入门

    vb编程入门_python编程入门Linux操作系统Shell编程快速入门、shell变量、、运算符、条件判断、流程控制(if、case、for、while语句)。

  • VS2010+OSG3.2+CEGUI0.8.4环境下实现简单的HelloWorld程序

    VS2010+OSG3.2+CEGUI0.8.4环境下实现简单的HelloWorld程序VS2010+OSG3.2+CEGUI0.8.4环境下实现简单的HelloWorld程序写文章之前必须要先吐槽一下CEGUI的兼容性,好多函数改了名称换了命名空间,以致于花了好长时间查看自带的Demo文件以及帮助文档,不过最终还是搞出来了,现将整个流程编写如下。1.首先创建工程之前必须先链接OSG以及CEGUI的开发库,根据自身配置路径进行设置,现将本人设置路径贴出来以供参考,如下:包含目录…

  • SQLyog详细使用教程[通俗易懂]

    SQLyog详细使用教程[通俗易懂]SQLyog详细使用教程

  • java的各种类型转换汇总

    java类型转换IntegerStringLongFloatDoubleDate 1如何将字串String转换成整数int? A.有两个方法: 1).

    2021年12月25日

发表回复

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

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