2013 ~【VUE+ ElementUI】——【上传、下载】进度计算

上传：FormData方式上传，监听 onUploadProgress

<el-upload
      :disabled="isUploading"
      ref="upload"
      :limit="1"
      accept=".bin"
      :headers="headers"
      :action="url"
      :show-file-list="false"
      :http-request="uploadSectionFile"
      class="uploadStyle"
    >
      <el-button
        :loading="isUploading"
        :disabled="isUploading"
        slot="trigger"
        type="primary"
        plain
        size="small"
        icon="el-icon-upload2"
        >{{ isUploading ? "文件上传中" : '上传'}}el-button
      >
      <el-progress v-if="isShow" class="poFix" :percentage="uploadProgress" :text-inside="false" :color="customColors" :stroke-width="4" />
    el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 接口：上传文件 form-data
export function uploadFile(data, config) {
  return request({
    url: '/moduleVersion/saveVersion',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'  // 以表单传数据的格式来传递fromdata
    },
    timeout: 2 * 60 * 1000, // 超时时长设为2分钟
    ...config
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13

/** 自定义上传 */
 uploadSectionFile(data) {
   this.uploadProgress = 0;
   const file = data.file;
   // const isLt2M = file.size / 1024 / 1024 < 500;
   // if (!isLt2M) {
   //   this.$message.error("文件大小不得超过500MB");
   //   return;
   // }
   this.$refs.upload.clearFiles(); // 这样才能二次选择其它文件
   this.isShow = true;
   this.submitForm(file);
 },
/** 上传 提交按钮 */
submitForm: function (file) {
  let that = this;
  let formData = new FormData();
  formData.append("file", file);
  const config = {
    onUploadProgress: progressEvent => {
      if (progressEvent.lengthComputable) {
        that.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      }
    }
  };
  uploadFile(formData, config).then((response) => {
    that.isUploading = false;
    that.$modal.msgSuccess("上传成功");
  })
  .catch(() => {
    that.isUploading = false;
  });
}
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

下载：blob文件流下载，监听 onDownloadProgress

// 接口：下载文件 blob
export function downloadFile(data, config) {
  return request({
    url: '/syslog/download',
    method: 'post',
    data: data,
    responseType: 'blob', // 接收blob文件流格式
    timeout: 2 * 60 * 1000, // 设置超时2分钟
    ...config
  })
}
1
2
3
4
5
6
7
8
9
10
11

/** 导出模板操作 */
    handleExport(row) {
      let that = this;
      that.downloadProgress = 0;
      
      let downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候 " + that.downloadProgress + '%', spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
      const config = {
        onDownloadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            that.downloadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
            downloadLoadingInstance.text = "正在下载数据，请稍候 " + that.downloadProgress + '%';
          }
        }
      };
      // 从后端请求到 文件流数据
      const fullPath = row.fullPath;
      downloadLog(fullPath, config).then((response) => {
        let downloadName = `${this.parseTime(new Date().getTime())}系统日志.zip`;
        this.downloadBlob(response, downloadName);
        downloadLoadingInstance.close(); // 关闭加载loading效果
      }).catch(() => {
      	downloadLoadingInstance.close(); // 关闭加载loading效果
      );
    },
    // 下载文件流格式的文件
	downloadBlob(response, downloadName) {
	  let blob = new Blob([response], {
	    type: "application/json;charset=utf-8",
	  });
	  let href = window.URL.createObjectURL(blob); // 创建下载的链接
	  if (window.navigator.msSaveBlob) {
	    try {
	      window.navigator.msSaveBlob(blob, downloadName);
	    } catch (e) {
	      console.log(e);
	    }
	  } else {
	    // 谷歌浏览器 创建a标签 添加download属性下载
	    let downloadElement = document.createElement("a");
	    downloadElement.href = href;
	    downloadElement.target = "_blank";
	    downloadElement.download = downloadName; // 下载后文件名
	    document.body.appendChild(downloadElement);
	    downloadElement.click(); // 点击下载
	    document.body.removeChild(downloadElement); // 下载完成移除元素
	    window.URL.revokeObjectURL(href); // 释放掉blob对象
	  }
	}
    
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