el-upload实现上传文件并展示进度条

el-upload在实现文件上传时无法触发on-progress钩子，即使调用后端接口并成功的情况下都无法触发，可以通过如下配置来解决：

const config ={onUploadProgress:progressEvent=>{if(progressEvent.lengthComputable){this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total)*100)
            console.log('progressEvent>>', progressEvent)
            console.log('uploadProgress>>', _this.uploadProgress)}}}

随后将config添加至调用后端接口，即可成功获取进度~

html:

前端-上传文件获取进度条：

  <el-uploadv-show="!fileList.length"ref="fileUpload"class="upload-demo"style="display: inline-block;height: 32px;margin-left: 8px"action="#":file-list="fileList":http-request="uploadVersion":on-change="handleChange":on-success="handleSuccess":on-progress="handleProgress":on-error="handleError":auto-upload="true":show-file-list="false"><!--            icon_upload.svg--><el-buttontype="primary"style="height: 32px;display: flex;align-items: center"><svg-iconicon-class="icon_upload"style="margin-right: 8px"/>上传文件</el-button><!--            <el-input v-model="uploadForm.filename" placeholder="请选择">--><!--              &lt;!&ndash;              <template slot="append"><el-button&ndash;&gt;--><!--              &lt;!&ndash;                size="mini"&ndash;&gt;--><!--              &lt;!&ndash;              >&ndash;&gt;--><!--              &lt;!&ndash;                上传文件&ndash;&gt;--><!--              &lt;!&ndash;              </el-button></template>&ndash;&gt;--><!--            </el-input>--></el-upload><!--          <el-button size="small" @click="sendClick">上传</el-button>--><divv-if="fileElProgress"><divclass="el-progress-div"><div><divv-loading="true"style="display: inline-block;width: 24px;height: 16px;padding-right: 8px;"/>{{ fileName }}</div><span><spanstyle="display: inline-block;margin-right: 8px">{{ progressPercent }}%</span><el-buttontype="text"@click="cancelUpload">取消</el-button></span></div><el-progress:percentage="progressPercent":text-inside="false":color="customColors":stroke-width="2"/><!--            :stroke-width="16" status="scuccess"--></div><templatev-if="!fileElProgress"><divv-for="item in fileList":key="item.name"class="fail-list"><divclass="list-item"><span:style="{color:showFailTip?'#FF3D00':'#fff' }"><svg-icon:icon-class="showFailTip? 'icon_error_file': 'icon_success_file'"/>
                  {{ item.name }}
                </span><spanstyle="float: right;display: flex;align-items: center;"><spanstyle="color: #878D99;display: inline-block;margin-right: 16px">{{ showFailTip ? '失败':'成功' }}</span><!--                  <span>{{ '失败' }}</span>--><el-buttonstyle="color: #00E3FF"type="text"size="small"@click="fileList = []">删除</el-button><el-buttonv-show="showFailTip"style="color: #00E3FF"type="text"size="small"@click="sendClick">重新上传</el-button></span></div></div></template>

JS部分

data(){return{// 进度条fileList:[],showFailTip:false,customColors:[{color:'rgba(223,228,237,0.10)',percentage:0},{color:'#00adc9',percentage:100}],fileElProgress:false,fileProgressText:'',progressPercent:0,}methodss:{uploadVersion(params){const _this =thisthis.uploadForm.filename = params.file.name
      this.fileFormData =newFormData()this.fileFormData.append('file', params.file)this.fileFormData.append('md5File', params.file)this.fileName = params.file.name
  
  
      const config ={onUploadProgress:progressEvent=>{if(progressEvent.lengthComputable){
            _this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total)*100)
            console.log('progressEvent>>', progressEvent)
            console.log('uploadProgress>>', _this.uploadProgress)this.fileElProgress =trueif(this.progressPercent <99){this.progressPercent = _this.uploadProgress
            }else{this.fileProgressText ='正在上传'}}}}uploadFile(this.fileFormData, config).then(res=>{if(res.data ==='success'){this.fileProgressText ='上传成功'}else{this.showFailTip =true}this.fileElProgress =false})},}},