当前位置:首页 > 前端 > Vue.js

Vue responseType中blob和arrayBuffer下载文件以及JSON处理

概述

项目里面总会有用到需要下载文件的功能,但同时又需要验证登录状态,恰好es6里面提供responseType blob这种文件流的异步方式。最近刚好碰到一个问题,如果后端接口返回正常的文件流时可以正常下载保存,当用户未登录或者获取文件异常的时候接口会返回json提示,如下:

  1. {
  2. code: 500,
  3. message: '未登录,请登陆后再下载'
  4. }

这样一来前端的api歇菜了,不过不要慌,总有办法解决!检查代码后发现前端只接收到了二进制文件流,并没有对接收到文件流特殊的情况下做json处理,而正常获取到文件流的时候接口返回的content-type会等于application/octet-stream,类似未登录这种情况会返回content-type会等于application/json,根据这一特性,我们可以进行这样的改造。

  1. this.instance.request(config).then(res => {
  2. const { data } = res
  3. if (data.type === 'application/json') {
  4. const reader = new FileReader()
  5. reader.onload = function () {
  6. const { message } = JSON.parse(reader.result)
  7. // message 就是我们要的提示文字
  8. }
  9. reader.readAsText(data)
  10. } else {
  11. // 正常下载保存文件的代码...
  12. const str = res.headers['content-disposition']
  13. let filename
  14. if (str) {
  15. filename = str.match(/filename=(\S*?)(;|$)/)[1]
  16. }
  17. filename = filename || '未命名'
  18. if (this.isIE()) {
  19. window.navigator.msSaveOrOpenBlob(data, filename)
  20. } else {
  21. const downloadElement = document.createElement('a')
  22. const href = window.URL.createObjectURL(res.data) // 创建下载的链接
  23. downloadElement.href = href
  24. downloadElement.download = decodeURI(filename) // 下载后文件名
  25. document.body.appendChild(downloadElement)
  26. downloadElement.click() // 点击下载
  27. document.body.removeChild(downloadElement) // 下载完成移除元素
  28. window.URL.revokeObjectURL(href) // 释放掉blob对象
  29. }
  30. }
  31. })

进一步了解responseType

设置这个值能够改变响应类型。意思就是告诉服务器后端接口那边你要的响应格式。
这张表格,收下吧,也许日后用得上:

数据类型
‘’ DOMString (这个是默认类型)
arraybuffer ArrayBuffer对象
blob Blob对象
document Document对象
json JavaScript object, parsed from a JSON string returned by the server
text DOMString
读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部