【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>
export function uploadFile(data, config) {
return request({
url: '/moduleVersion/saveVersion',
method: 'post',
data: data,
headers: {
'Content-Type': 'multipart/form-data'
},
timeout: 2 * 60 * 1000,
...config
})
}
uploadSectionFile(data) {
this.uploadProgress = 0;
const file = data.file;
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
export function downloadFile(data, config) {
return request({
url: '/syslog/download',
method: 'post',
data: data,
responseType: 'blob',
timeout: 2 * 60 * 1000,
...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();
}).catch(() => {
downloadLoadingInstance.close();
);
},
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 {
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);
}
}