vue element 前端上传文件后 后台传文件流blob对象下载文件

这里写自定义目录标题

  • 后台传文件流blob对象前端下载文件
    • 问题
    • 解决方案,转成bolb对象
  • 创建Blob对象
  • 创建链接

后台传文件流blob对象前端下载文件

问题

在页面下载文件时,可以根据路径如 a 标签的 href="" ,但是有时将文件直接上传到后台做处理后回传到前端再去下载文件,这时后台返回的是文件流,并没有路径提供下载。

解决方案,转成bolb对象

Blob对象表示一个不可变的, 原始数据的类似文件对象。
如下使用了element ui 的上传组件

// 上传
 <el-upload class="upload-demo"
               action="xxx"  //上传文件的路径
               accept=".geojson" // 设置上传文件的格式
               :before-upload="beforeUpload"
               :auto-upload="true"
               :on-success="handleSuccess"
               :file-list="fileList">
      <el-button slot="trigger"
                 size="small"
                 type="primary">选取文件</el-button>
    </el-upload>

在methods 里面

// 文件上传成功时的钩子 response为返回的数据
     handleSuccess (response, file) {
      let blob = new Blob([JSON.stringify(response)], { type: 'application/json' });
      // console.log('blob', blob)
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = 'change_' + file.name;
      a.click();
    }

创建Blob对象

 let blob = new Blob(Array,options)

参数Array
是一个由ArrayBuffer ArrayBufferView Blob Blob 对象表示一个不可变、原始数据的类文件对象。DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob 。DOMStrings会被编码为UTF-8。

参数options
是一个可选的BlobPropertyBag字典指定如下两个属性:
1、type, 默认值为 “”,用来表示文件类型,例如 ‘text/json’ 代表一个JSON文件,'text/html’代表一个HTML文件。
2、endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持blob中保存的结束符不变 .

创建链接

#URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

你可能感兴趣的:(element,js,Vue,javascript,html5,文件流,Blob)