项目使用的 Element 的 upload组件。
需求:
需求很简单,导入 Excel 数据,如果导入成功,提示‘导入成功’,如果导入失败,直接下载后端返回的 excel文件流。
遇到的问题
刚开始采取的是 upload组件 默认上传行为的方式,
但是由于upload组件默认是 post请求,请求时无法指定 responseType="blob",下载下来的excel表会提示文件损坏,无法打开。

贴下当时的代码:
上传错误时后端返回的文件流:
4260e66abdc91e41ea1f83497c3bc64.png

如果直接用后端返回的文件流 data创建Blob对象(blob = new Blob([data])),再用 URL.createObjectURL(blob) 得到一个url赋值给a标签,下载下来的文件是无法打开的。
89b8c1e8ccec633df6b975d5b0672bf.png

解决方案
采用 upload组件的 http-request,覆盖默认的上传行为,实现自定义上传。
ce44ea74906600c07487117f0376c89.png

注意(重要):

  • 请求时 responseType: "blob" 该参数必填,不然下载下来的excel表会提示文件损坏,无法打开

延伸
请求时,response = 'blob',

  • 得到文件流,直接下载
  • 得到 JSON 返回数据,需要展现 提示信息 或 错误信息,那么需要转换一下。因为请求失败时,后端返回的json对象,如:{"messsage":"备件异常","code":301,"success": false},也被转成了 blob。
  • 思路:根据得到的 response.type 返回内容的 MIME TYPE 来判断:

      下载文件 或 去做一些 JSON 数据提示的操作。
      如果是 JSON类型 那就把 Blob 通过 readAsText 转为JSON格式。
      这种方式应该是支持IE10和IE10以上版本,具体的自己查查。

    be68695630e2aa63907fe12409b6b4e.png

请求时,response = 'arraybuffer'

  • 简略点 如何将数据 arraybuffer 转成 JSON 对象?
    051dd9226f76f6368e8fc59a2497dbf.png
    该方法支持的浏览器自行查查。

盗心贼
5 声望0 粉丝

余生请您多多指教!!!