axios利用Blob下载

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

 download(param) {
      // 响应类型：arraybuffer, blob
      this.$axios
        .post('url', param, {
          responseType: 'blob'
        })
        .then(res => {

          if (!res) {
            console.error('响应异常：', res)
            return false
          } else {
            const blob = new Blob([res], { type: res.headers['content-type'] })
            let fileName = ''
            const contentDisposition = res.headers['content-disposition']
            if (contentDisposition) {
              fileName = window.decodeURI(
                res.headers['content-disposition'].split('=')[1]
              )
            }
            this.downFile(blob, fileName)
          }

        })
        .catch(function (error) {
          console.log(error)
        })
    },
    downFile(blob, fileName) {
      // 非IE下载
      if ('download' in document.createElement('a')) {
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob) // 创建下载的链接
        link.download = fileName // 下载后文件名
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click() // 点击下载
        window.URL.revokeObjectURL(link.href) // 释放掉blob对象
        document.body.removeChild(link) // 下载完成移除元素
      } else {
        // IE10+下载
        window.navigator.msSaveBlob(blob, fileName)
      }
    },

  上传

 <el-upload drag action="" class="upload upload-drag-caseIn" :http-request="httpIORequest" :on-remove="fileIORemove" :on-exceed="handleIOExceed" :on-change="handleIOChange" :limit="1" :file-list="fileList" accept=".json">
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload> 
// ------------------上传文件-开始-------------------
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleIOChange(file, fileList) {
      // 上传文件大小限制，Math.pow(2,20)就是1024*1024，需要显示多少兆就把10改成多少兆
      console.log('文件大小为：', file, fileList)
      if (file.size > 10 * Math.pow(2, 20)) {
        this.fileList = []
        this.$message({
          type: 'warning',
          message: '文件大小超过10M，请重新选择文件！'
        })
        return
      }
      this.fileList = fileList
      this.uploadIOFile(file)
    },
    // 上传excel参数
    async uploadIOFile(param) {
      let fileObject = param.raw
      let formData = new FormData()

      console.log(fileObject, formData)
      formData.append('file', fileObject)
      console.log(fileObject)
      const res = await this.$api.upload(formData)

      console.log('上传文件结果：', res)
      const { code, msg, data } = res
      if (code === '200') {
        this.$api.tip(msg)
        this.caseInFormData.fileName = data
      } else {
        this.$api.tip(msg, 'error')
      }
    },
    // 覆盖请求
    httpIORequest() { },
    // 移除excel参数
    fileIORemove() {
      console.log('移除文件')
      // 执行接口移除文件
      this.caseInFormData.fileName = ''
    },
    // 上传文件限制1个
    handleIOExceed() {
      // this.$message.warning(`最多只可上传一个文件！`)
      this.$api.tip('最多只可上传一个文件！', 'warning')
    },
    // ------------------上传文件-结束-------------------