文件上传你会吧？那帮我做个文件下载功能

大家好，又是我，大聪明，立志做个早起吃草的马儿。话说上回解决完部署的问题(部署完了，样式不生效差点让我这个前端仔背锅)，我又感觉回到了眼神清澈的大聪明状态，直到今天产品跟我说：“听说你是文件上传高手？做过大文件上传？切片?断点续传？”，听完我一脸戒备和紧张，“难道我面试吹的牛皮被他发现了，现在要捅破了？”我正在犹豫要不要跟他摊牌说，我面试掺了水的时候，他又来了一句，“那帮我做个 文件下载 的功能吧”，我突然放松下来了，原来是要加需求呀，害我白担心一场。作为CVT工程师，这点事根本难不倒我。
好了下面开始我的CV大法。

首先找到后端协调，他让我返回一个file_id,该file_id是我在文件上传到服务器存储的时候，后端返回给我的，通过此file_id，来找到对应的文件，很好很简单。

接着，看后端提供的文件下载接口，咱就是说，经历的少，不知道对不对，后端直接就是返回文件的字节流（bytes），除此之外没有任何信息，没有文件名，没有文件类型，去问了一下说就是这样的，咱也不敢多问

天无绝人之路，还好我在前端获取文件的时候能找到总的文件列表，通过遍历出来也能拿到文件的信息

下面是判断文件类型方法

    getFileTypeMime (key) {
let mimeType = ''
switch (key) {
case 'png':

          mimeType = 'image/png'
break
case 'jpeg':

          mimeType = 'image/jpeg'
break
case 'pdf':

          mimeType = 'application/pdf'
break
case 'xlsx':

          mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
break
case 'docx':

          mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
break
default:

          mimeType = 'text/plain'
break

      }
return mimeType

    },

下面是文件下载的方法 (错误的)

    downLoad (value, key) {
const type = key.split('.')[1] // 文件类型
const name = key.split('.')[0] // 文件名
axiosBase({
url: `/ass/download?alert_id=${this.alert_id}&file_id=${value}`,
method: 'get',

      }).then(res => {
const blob = new Blob([res], { type: this.getFileTypeMime(type) }) // 文件类型
const link = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接

        link.href = href

        link.download = name // 下载后文件名
document.body.appendChild(link)

        link.click() // 点击下载
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象

      }).catch((err) => { console.log(err) })

    }

为什么是错误的呢？点了效果也确实是实现了 文件的下载，但是打开，然后格式错误了？？

又是百思不得其解的问题，直接打开度娘，搜索又找到了这篇(神文)解决

    downLoad (value, key) {
const type = key.split('.')[1] // 文件类型
const name = key.split('.')[0] // 文件名
axiosBase({
url: `/download?alert_id=${this.alert_id}&file_id=${value}`,
method: 'get',
responseType: 'blob'

      }).then(res => {
const blob = new Blob([res], { type: this.getFileTypeMime(type) }) // 文件类型
const link = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接

        link.href = href

        link.download = name // 下载后文件名
document.body.appendChild(link)

        link.click() // 点击下载
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象

      }).catch((err) => { console.log(err) })

    }

又是有惊无险的一天