vue 大文件切片下载

前提是你上传的时候也是切片上传，下载的时候后端给你返回的是一个文件id的数组，如果是你就可以用下面的方法

// 循环下载文件
// id是每个文件的id type 是一个类型，我传入是应为给不同的组件赋值
    getFile(id, type) {
    // 通过wen文件id去获取对应的文件切片的url
      sliceFileDownload(id).then((res) => {
        let list = []
        if (res.data.partList) {
          res.data.partList.map((item) => {
          //自定义请求
            let instance = axios.create({
              responseType: 'blob',
            })
            instance.get(`${item.fileDownloadUrl}`).then((info) => {
              list.push(info.data)
              //判断切片文件是否都获取完毕
              if (res.data.partCount == list.length) {
                let blob = new Blob(list);
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                let para = {
                  fileId: id,
                  fileName: res.data.fileName,
                  location: link.href
                }
                // type==1 type ==2 type ==3 type ==4 都是我自己的需求（图片展示），type==other 是文件直接下载
                if (type == 1) {
                  this.addform.coreImageFileList.push(para)
                } else if (type == 2) {
                  this.addform.originalScanImageFileList.push(para)
                } else if (type == 3) {
                  this.addform.refactorDataBodyFile.push(para)
                } else if (type == 4) {
                  this.addform.testReportFile.push(para)
                } else if (type == 'other') {
                  let name = res.data.fileName.slice(res.data.fileName.lastIndexOf('.') + 1)
                  link.download = res.data.fileName
                  document.body.appendChild(link)
                  link.click()
                  setTimeout(() => {
                    window.URL.revokeObjectURL(href)
                    document.body.removeChild(link)
                  }, 0)
                }

              }
            })

          })
        }
      })
    },
    // 使用的地方
    //testReportFile 是一个数组，数组中上传了多个文件，所以需要循环，如果只有一个文件，你可以直接把文件id传入就可以。
     response.data.testReportFile.map((res) => {
            this.getFile(res.fileId, 4)
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56