文件上传进度条

liupengpeng

2023-02-06 b6214bd4bfef81e7d2510e882aa7160ce6763285

文件上传进度条

 public/config/config.js

@@ -1,10 +1,11 @@
var isWeb = location.hostname.indexOf("103.85.165.") > -1;
//var isWeb = location.hostname.indexOf("103.85.165.") > -1;
var isWeb = true;

var webHost = isWeb ? location.hostname + ":8052" : '192.168.20.106' + ":12316";
var webHost = isWeb ? "103.85.165.99" + ":8052" : '192.168.20.205' + ":8088";

var fmeHost = isWeb ? location.hostname + ":8051" : '192.168.20.205' + ":88";
var fmeHost = isWeb ? "103.85.165.99" + ":8051" : '192.168.20.205' + ":88";

var iisHost = isWeb ? location.hostname + ":8050" : '192.168.20.205' + ":80";
var iisHost = isWeb ? "103.85.165.99" + ":8050" : '192.168.20.205' + ":80";

var menuStartName = "管道基础大数据平台";

@@ -16,7 +17,7 @@
var socketUrl = 'ws://' + webHost + '/server/ws/select';

// GeoServerUrl
var geoServerURl = 'http://192.168.20.205:8088//geoserver/LF/wms';
var geoServerURl = 'http://' + webHost + '/geoserver/LF/wms';

var geoserverWFS = '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';

@@ -26,7 +27,7 @@
var modelUrl = LFData + '/tileset/SN/tileset.json';

// DEM
var demLayer = 'http://192.168.20.55/LFData/dem';
var demLayer = LFData + '/dem';

// 综合展示
window.sceneConfig = {

 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();