管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-02-07 21de2bb71eef9c890909d3494abcf8fef767fa6f
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) { //检查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() {
      const res = await dataUploadSelectPath();