自定义上传按钮，非自动上传，效果图

action - 就是上传的接口地址
accept - 是限制上传文件格式，设置后只能上传该格式文件，
选取-选取按钮只是选择了文件 ，但是并没有上传
若要点击上传按钮选取文件后直接上传，直接将 :auto-upload=“false” 去掉，或设置成true，再隐藏选取按钮这个标签即可。

  <el-upload
            class="upload-demo inline-block"
            :action="commonApi02"
            ref="upload02"
            :on-preview="handlePreview"
            :on-exceed="handleExceed"
            :on-success="fileSuccess"
            :limit="1"
            :on-change="handleChange"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary" style="margin-left: 5px">
              选取
            </el-button>

            <el-button style="margin-left: 5px" size="small" type="success" @click="submitUpload">
              上传
            </el-button>
            // 可以在这里设置伪文件列表
            </el-upload>

主要是上传按钮增加click函数并且 :auto-upload=“false”，请求返回的结果可以通过:on-success属性，定义函数获得。函数部分代码如下：

  // 上传文件
    submitUpload() {
      this.$refs.upload02.submit();
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`,
      );
    },
    handleChange(file) { //  这个函数中的代码是我的项目中的代码 --判断是否应该隐藏伪文件列表-移除文件名
    //  判断是否应该显示伪文件列表-展示文件名  -我没有写在这里
      if (this.isVoluntarilyFlags.inquireFlags) {  
        this.urlState = false;
        this.urlHtml = '';
      } else if (this.isVoluntarilyFlags.recordFlags) {
        this.urlState = false;
        this.urlHtml = '';
      }
      this.filename = file.name;  // 获取文件名

      this.$notify({
        title: '选取文件提示',
        message: '选取文件为暂存文件，切换消息类型会清空暂存文件哦！',
      });
      this.$notify({
        title: '上传提示',
        message: '点击上传按钮，即可完成暂存文件上传！',
      });
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    fileSuccess(res) { 
      if (res.status === '0') {
        this.$message({
          type: 'success',
          message: '上传成功!',
        });
        this.dialogData.autoSendMessageTaskDO.url = res.data;  //这个 res就是上面设置的上传文件成功后返回的数据体
      } else {
        this.$message.error('上传失败！');
      }
    },

在上传文件后，或者是选择了文件后，会生成一个上传文件列表，样式如图：

在打开弹窗后有重新打开弹窗，此时已上传文件列表，或已选择上传文件列表会消失，解决办法：写死一个结构，动态替换文件名

     <!-- 伪文件样式 -->
            <ul v-if="urlState" class="el-upload-list el-upload-list--text">
              <li tabindex="0" class="el-upload-list__item is-ready">
                <!---->
                <a class="el-upload-list__item-name">
               
                  <i class="el-icon-document"></i>
                  {{ urlHtml --这是文件名 }}
                </a>
                <label class="el-upload-list__item-status-label">
           
                  <i class="el-icon-upload-success el-icon-circle-check"></i>
                </label>
                     // 这里可以手动添加关闭按钮功能
                <i class="el-icon-close"></i>
                <i class="el-icon-close-tip"></i>
              </li>
            </ul>

elementui遇到的一些其他问题解决办法：传送门