vue element 前端上传文件后 后台传文件流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对象.