<el-upload
              drag
              action=""
              :http-request="self_upload"
              :limit="1"
              ref="imgUrl"
              accept="*"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">点击或文件拖拽到这里上传</div>
  </el-upload>
  <el-progress :percentage="percent"></el-progress>

2.通过axios实现

self_upload(item) {
      let formData = new FormData();
      formData.append("file", item.file);
      request
        .post("/file/upload", formData, {
          onUploadProgress: (progressEvent) => {
            console.log("进度开始");
            let percent =
              ((progressEvent.loaded / progressEvent.total) * 100) | 0;
            console.log(percent);
            this.percent=percent;
          },
        })
        .then((res) => {});
    }

3.控制台截图。文件小,速度很快,直接进度100。文件很大的话,由于设置了接口请求超时的时间,请求没有结束,就断了连接。
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐