vue项目文件流下载功能

一梦晓三生

已于 2022-02-07 11:21:44 修改

阅读量478

点赞数

分类专栏：日常问题记录文章标签： vue.js 前端 json

于 2022-02-07 11:13:37 首次发布

本文链接：https://blog.csdn.net/zzz00008LN/article/details/122805965

版权

日常问题记录专栏收录该内容

22 篇文章 0 订阅

订阅专栏

需要实现文件下载的功能，有如下两种情况：

1.如果符合条件，返回文件流
2.如果不符合条件，则后端返回JSON，附上失败的msg，前端需要将msg的内容展示给用户

// 文件流下载方法示例
uploadSectionFile(params){
      let fileName = params.file.name
      let fileType = ''
      if (fileName) {
        fileType = fileName.split('.').pop()
      }
      const isLt1GB = params.file.size / 1024 / 1024 < 1024
      if (['xls'].indexOf(fileType.toLowerCase()) === -1) {
        this.$message.error('上传文件只能是 xls 格式!')
        return
      }
      if (!isLt1GB) {
        this.$message.error('上传文件大小不能超过 1GB!')
        return
      }
      const form = new FormData();
      // 文件对象
      form.append("file", params.file);
      this.loading = true
      // 自己封装的axios方法
      this.$http({
        url: '',
        type: 'post',
        params: form,
        responseType: "blob", //重点，文件流下载时，请求方法里要申明返回类型时blob
        forced:true,
        All:true,
      }).then(res=>{
        this.loading = false
        // json格式解析
        // 如果是json类型，就是返回了错误信息，解析出来并展示
        if(res.data.type=='application/json'){
          const reader = new FileReader()
          reader.onload = ()=> {
            let resp = JSON.parse(reader.result)
            if(resp){
              if(resp.httpCode!=200){
                this.$message.error(resp.msg ? resp.msg : '上传失败')
                return
              }
            }
          }
          reader.readAsText(res.data)
        }else{
          // blob格式下载
          // 不是JSON类型就直接下载
          this.$tools.daochuDownload(res)
        }
      }).catch(e=>{
        this.loading = false
      })
    }