From b6214bd4bfef81e7d2510e882aa7160ce6763285 Mon Sep 17 00:00:00 2001
From: liupengpeng <276665548@qq.com>
Date: 星期一, 06 二月 2023 19:14:38 +0800
Subject: [PATCH] 文件上传进度条
---
src/views/datamanage/dataUpdata.vue | 46 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 46 insertions(+), 0 deletions(-)
diff --git a/src/views/datamanage/dataUpdata.vue b/src/views/datamanage/dataUpdata.vue
index 0e95bb7..286df8e 100644
--- a/src/views/datamanage/dataUpdata.vue
+++ b/src/views/datamanage/dataUpdata.vue
@@ -946,6 +946,21 @@
</div>
</el-dialog>
+ <el-dialog
+ :close-on-click-modal="false"
+ title="涓婁紶杩涘害"
+ :visible.sync="jindudialogVisible"
+ width="30%">
+ <div>
+ <div>
+ 鏂囦欢浼犺緭杩涘害锛�
+ </div>
+ <div>
+ <el-progress :percentage="jindutiao" :format="format"></el-progress>
+ </div>
+ </div>
+
+ </el-dialog>
</div>
</template>
@@ -1129,6 +1144,9 @@
download: false,
},
+ jindutiao: 0,
+ jindudialogVisible: false,
+ jindutiaoname: []
}
},
@@ -1753,6 +1771,16 @@
}
}
}
+ const that = this
+ that.jindudialogVisible = true
+ let listval = []
+ formData.forEach((key, val) => {
+ listval.push({
+ name: val
+ })
+ })
+ that.$set(this, 'jindutiaoname', listval)
+ that.$set(this, 'jindutiao', 0)
this.loading = true;
$.ajax(BASE_URL + "/dataUpload/uploadFiles?token=" + token + "&path=" + this.formInline.path, {
type: "post",
@@ -1767,6 +1795,7 @@
return this.$message.error('鏁版嵁涓婁紶澶辫触');
}
this.getFileLength();
+ this.$set(this, 'jindutiao', 100)
this.$message({
message: '涓婁紶鎴愬姛',
type: 'success'
@@ -1776,9 +1805,26 @@
error: (rs) => {
this.loading = false;
this.$message.error('鏁版嵁涓婁紶澶辫触');
+ },
+ xhr: function () {
+ var myXhr = $.ajaxSettings.xhr();
+ if (myXhr.upload) { //妫�鏌pload灞炴�ф槸鍚﹀瓨鍦�
+ myXhr.upload.addEventListener('progress', that.progressHandlingFunction, false); //缁戝畾progress浜嬩欢鐨勫洖璋冨嚱鏁�
+ }
+ return myXhr; //xhr瀵硅薄杩斿洖缁檍Query浣跨敤
}
});
},
+ progressHandlingFunction(event) {
+ var loaded = event.loaded;//宸蹭笂浼�
+ var loaded = Math.floor(100 * (event.loaded / event.total) - 1); //璁＄畻宸茬粡涓婁紶鐨勭櫨鍒嗘瘮
+ $("#prog").html(loaded + "%"); //搴旂敤鍒版樉绀篣I锛屽彲鏍规嵁鑷繁闇�瑕佷慨鏀�
+ this.jindutiao = loaded
+ this.$set(this, 'jindutiao', loaded)
+ },
+ format(percentage) {
+ return percentage === 100 ? '涓婁紶瀹屾瘯' : `${percentage}%`;
+ },
//鑾峰彇鏂囦欢涓婁紶璺緞
async getFilePath() {
const res = await dataUploadSelectPath();
--
Gitblit v1.9.3