管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-07 6c086fae275e7f3579654e374cadb85e7e054949
src/views/datamanage/dataUpdata.vue
@@ -30,6 +30,8 @@
                :disabled="tableData.length == 0 ? false : true"
                v-model="formInline.uploadType"
                @change="uploadTypeChange"
                :popper-append-to-body="false"
                placeholder="请选择"
              >
                <el-option
@@ -946,6 +948,25 @@
      </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 +1150,9 @@
        download: false,
      },
      jindutiao: 0,
      jindudialogVisible: false,
      jindutiaoname: []
    }
  },
@@ -1753,6 +1777,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 +1801,7 @@
            return this.$message.error('数据上传失败');
          }
          this.getFileLength();
          this.$set(this, 'jindutiao', 100)
          this.$message({
            message: '上传成功',
            type: 'success'
@@ -1776,8 +1811,25 @@
        error: (rs) => {
          this.loading = false;
          this.$message.error('数据上传失败');
        },
        xhr: function () {
          var myXhr = $.ajaxSettings.xhr();
          if (myXhr.upload) { //检查upload属性是否存在
            myXhr.upload.addEventListener('progress', that.progressHandlingFunction, false); //绑定progress事件的回调函数
          }
          return myXhr; //xhr对象返回给jQuery使用
        }
      });
    },
    progressHandlingFunction(event) {
      var loaded = event.loaded;//已上传
      var loaded = Math.floor(100 * (event.loaded / event.total) - 1); //计算已经上传的百分比
      $("#prog").html(loaded + "%"); //应用到显示UI,可根据自己需要修改
      this.jindutiao = loaded
      this.$set(this, 'jindutiao', loaded)
    },
    format(percentage) {
      return percentage === 100 ? '上传完毕' : `${percentage}%`;
    },
    //获取文件上传路径
    async getFilePath() {
@@ -2202,3 +2254,4 @@
  }
};
</script>