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"plainsize="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>

// 接口：上传文件 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})
}

/** 自定义上传 */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;});
}

下载：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})
}

/** 导出模板操作 */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对象}}