el-upload上传,进度条

2023-01-12  本文已影响0人  lvyweb

el-upload上传,不立即上传,点击确定的时候上传的时候进度条
html部分

 <div class="file-handle">
                      <el-upload ref="uploadFile"  action="#" 
                        :auto-upload="false"
                        :file-list="createShowData.fileList"
                        accept=".pdf"
                        :on-change="fileChange">
                        <div class="file-text">
                          <el-button type="primary" v-auto-blur>读取文件</el-button>
                        </div>
                      </el-upload>
                      <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
                    </div>

js部分

  let formData = new FormData();
  formData.append("reportName", this.createShowData.reportName);
   formData.append("description", this.createShowData.description);
axios({
              method: "POST",
              headers: { "Content-Type": "multipart/form-data" },
              url: '请求地址',
              data: formData,
              onUploadProgress:((node)=>{
                      let tempProgress = node.loaded/node.total; //上传进度
                      this.progressFlag = true;
                      this.loadProgress = parseInt(tempProgress *100 ) ;
                      if(tempProgress == 1){
                        this.progressFlag = false;
                        this.closeDialog();
                        this.isFormLoading = false;
                      }
              })
            }).then((res) => {
              this.uploadSuccess(res);
            }).catch((res)=>{
              this.$layer.message(res || "失败",'error')
            });

上一篇下一篇

猜你喜欢

热点阅读