以流的方式下载文件、以及上传文件

封装的axios下载

// 下载数据
export const downloadFile = (id) => {
  return axios.request({
    url: '/file-manage/file/download/' + id,
    method: 'get',
    responseType: 'blob'
  })
}

传入下载的文件名，对应的文件id来下载流格式的文件

    // 下载文件
    downloadFile (filename, id) {
      downloadFile(id).then(res => {
        console.log(res)
        if (!res) {
          return
        }
        let url = window.URL.createObjectURL(res.data)
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', filename)
        document.body.appendChild(link)
        link.click()
      }).catch(err => {
        console.log(err.message)
      })
    },

 上传

// 上传文件
  upData(data) {
    return axios.request({
      url: '/file-manage/file/import',
      method: 'post',
      data,
      headers: { 'form-data': 'multipart/form-data', Authorization: Cookies.get('accessToken') }
    })
  }

 页面代码

 <input type="file" class="file" style="display: none" @change="getFile" />

 <button class="ioc-button i-mini i-warning" style="margin-left: 5px" @click="exportFile">
        导出
 </button>

    // 上传文件
    importFile() {
      document.querySelector('input[type=file]').click()
    },
    // 获取文件
    getFile() {
      const formData = new window.FormData()
      const files = document.querySelector('input[type=file]').files
      formData.append('file', files[0])
      // Todo
      // 网络请求传递formData
　　　 upData(formData) 

},

 地址下载

const downloadRes = async (url, name) => {
  let response = await fetch(url); // 内容转变成blob地址
  let blob = await response.blob();  // 创建隐藏的可下载链接
  let objectUrl = window.URL.createObjectURL(blob);
  let a = document.createElement('a');
  a.href = objectUrl;
  a.download = name;
  a.click()
  a.remove();
}

let url = document.querySelector('video').currentSrc
let name = '视频';
downloadRes(url, name).then()

 blob方式

          // 另一种
          let binaryData = [];
          binaryData.push(xhr.response);
          let url = window.URL.createObjectURL(new Blob(binaryData))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '图片' + i + '.jpeg')
          document.body.appendChild(link)
          link.click()
          link.remove()