element ui 自定义上传图片，实现覆盖上传、加入进度条。

 效果图：

 

 html:

  <div class="disflexStart" style="margin-bottom:20px">
              <el-button type="primary" @click="uploadImg" style="margin-right:10px">上传图片</el-button>
              <div v-if="file" style="flex:1">
                <template v-if="file.status !== 'success'">
                  <el-progress :percentage="handlePercent(file)" :format="format"></el-progress>
                </template>
              </div>
            </div>
            <el-upload ref="upload" :file-list='uploadList' action="#" list-type="picture-card" :show-file-list="false" :on-success="addImgUrl" :on-remove="removeImgUrl" :headers="headers" :on-change="handleBeforeUpload">
            </el-upload>
            <div class="disflexStart">
              <div class="demo-upload-list">
                <div v-if="file">
                  <template v-if="file.status == 'success'">
                    <img :src="editform.pic" />
                  </template>

                </div>
                <i class="el-icon-plus"></i>
              </div>

 

js:

 按钮触发el-upload上传事件

//点击上传图片
    uploadImg() {
      this.$refs['upload'].$children[0].$refs.input.click()
    },

 实现覆盖上传

   //添加图片
    addImgUrl(res, file, fileList) {
      //保存图片到表单数据图片列表中
      if (res.code == "0") {
        this.editform.pic = res.data;  //图片回填
        this.uploadList = fileList  // 保存上传列表
      }
    },
//覆盖上传
    handleBeforeUpload(file, fileList) {
      this.uploadList = [fileList[fileList.length - 1]]
    },

 实现进度条，通过el-upload 上传列表中file 来控制进度条显示与百分比

  // 进度条&图片 展示
    file() {
      return this.uploadList[0];
    },