Vue文件上传、下载

深碍√TFBOYSˉ_ 2022-09-02 00:57 139阅读 0赞

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

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 java文件上传(java文件上传下载)

java文件怎么打开呢？可以用java的免费开发工具Eclipse或者JavaJDKAPI来打开运行 Java文件是什么？ Java文件是由SunMicrosy

灰太狼/ 2023年09月25日 08:16/ 0 赞/ 106 阅读

相关文件上传、下载

文章目录文件上传 jsp servlet 文件下载文件上传 jsp jsp需要做如下

待我称王封你为后i/ 2022年10月29日 13:29/ 0 赞/ 204 阅读

相关 Vue文件上传、下载

代码示例：文件上传到接口，对接口返回的文件进行下载。 <template> <div class="hello"> <h1>{

深碍√TFBOYSˉ_/ 2022年09月02日 00:57/ 0 赞/ 140 阅读

相关文件上传&下载

上传步骤：１、创建解析工厂DiskFileItemFactory对象２、使用DiskFileItemFactory 对象创建ServletFileUpload对象。

喜欢ヅ旅行/ 2022年05月19日 05:28/ 0 赞/ 277 阅读

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

文件下载：文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合b

灰太狼/ 2022年05月15日 01:22/ 0 赞/ 291 阅读

相关文件上传-下载

上传原理与图片上传类似详见维权资料上传下载一、上传 <input class="upload" type="file" style="di

末蓝、/ 2022年04月02日 11:58/ 0 赞/ 316 阅读

相关 springboot整合vue实现上传下载文件

springboot整合vue实现上传下载文件文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文件

水深无声/ 2022年02月04日 02:34/ 0 赞/ 656 阅读

相关 vue-上传文件

<label for="exampleInputFile">头像</label> <img :src=" imgsrc != '' ? imgsrc :'../

妖狐艹你老母/ 2021年12月16日 12:04/ 0 赞/ 272 阅读

相关文件上传下载

JSP 1.input的type设置为file,还是通过表单进行提交 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

我就是我/ 2021年09月02日 05:51/ 0 赞/ 526 阅读

相关 vue之element-ui文件上传下载

1.文件下载兼容IE //以一个方法的形式调用改方法传递参数 //pafurl 是一个网络地址(浏览器打开可以访问) http:// /

偏执的太偏执、/ 2021年08月27日 17:53/ 0 赞/ 333 阅读