美文网首页
el-upload上传,进度条

el-upload上传,进度条

作者: lvyweb | 来源:发表于2023-01-12 16:29 被阅读0次

    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')
                });
    
    

    相关文章

      网友评论

          本文标题:el-upload上传,进度条

          本文链接:https://www.haomeiwen.com/subject/rflwcdtx.html