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

2024-01-18 06:43| 来源: 网络整理| 查看: 265

这里写自定义目录标题后台传文件流blob对象前端下载文件问题解决方案，转成bolb对象创建Blob对象创建链接

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

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

解决方案，转成bolb对象

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

// 上传选取文件

在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对象.

【本文地址】

公司简介

联系我们

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

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