文件上传进度条(基于vue+element)

最新推荐文章于 2024-09-29 13:21:02 发布

高叫瘦

最新推荐文章于 2024-09-29 13:21:02 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_49847526/article/details/114278855

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

直接上图

 <el-dialog title="上传文件" :visible.sync="dialoguploadingShow">
      <el-upload
        class="upload-demo"
        :auto-upload="false"
        ref="upload"
        action="Fake Action"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :before-remove="beforeRemove"
        :on-progress="progressA"
        :on-success="success"
        multiple
        :file-list="fileList"
      >
        <el-button
          style="position: absolute; right: 140px; bottom: 20px;"
          type="primary"
          >选择文件</el-button
        >
      </el-upload>
      <el-select
        v-model="construction.form.region"
        style="width: 40%; position: relative; top: 20px"
        placeholder="请选择密级"
        @change="selectWorkName"
      >
        <el-option
          v-for="(item, i) in securityclassification"
          :key="i"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialoguploadingClickSumit"
          >上传文件
        </el-button>
      </div>
    </el-dialog>
    
        this.$axios
          .post("api/docSmart/v1/system/docData/files", formData, {
            //上传进度
            headers: {
              authorization: this.token,
            },
            onUploadProgress: (progressEvent) => {
              console.log(progressEvent);
              console.log(formData);
              console.log(progressEvent.lengthComputable);
              let num = parseInt(
                ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0)
              ); //百分比
              // file.onProgress({percent: num})
              console.log(num); //进度条
              this.percentage[i] = num;
              item.percentage = num;
              console.log("是否在线", navigator.onLine);
              console.log("网速", navigator.connection.downlink, "MB/s");
              //  this.downlink= navigator.connection.downlink;
              this.$store.commit("setdownlink", navigator.connection.downlink);
              // if (num == 100) {
              // this.fileList = [];
              // this.percentage = 0;
              // this.percentageshow = false;
              // }
            },
          })
          .then((res) => {})