Element UI | Upload 使用submit方法手动上传文件

一、需求

点击上传文件按钮不立刻进行上传，而是点击提交后再调用上传接口，和表单一起提交。

二、实现

                <table>
                    <tr>
                      <td class="column">材料</td>
                      <td colspan="3">
                        <el-upload
                          ref="fileUpload"
                          :action="`${baseURI}/common/upload`"
                          :headers="headers"
                          :file-list="fileList"
                          :auto-upload="false"
                          :on-success="fileUploadSuccess"
                          :on-preview="filePreview"
                          :on-remove="fileRemove"
                        >
                          <el-button icon="el-icon-upload2">
                            点击上传
                          </el-button>
                          <div slot="tip" class="el-upload__tip">可上传.xlsx、.docx、.doc、.xls...</div>
                        </el-upload>
                      </td>
                  </tr>
              </table>
      <template #footer>
        <el-button type="primary" @click="submitRectification">确定</el-button>
        <el-button @click="showInput = false">取消</el-button>
      </template>

js: 

判断文件没有上传即先进行文件上传，上传文件成功后在调用表单上传接口，否则直接调用接口上传表单。submit为element ui内部方法。表单上传接口一般传递文件id。

    submitRectification() {
      if (this.$refs.fileUpload.uploadFiles.some((item) => item.status !== 'success')) {
        this.$refs.fileUpload.submit();
      } else {
        this.write();
      }
    },
    // 材料上传成功回调
    fileUploadSuccess() {
      const finished = this.$refs.fileUpload.uploadFiles.every((item) => item.status === 'success');
      if (finished) {
        this.questionDetail.evidenceName = this.$refs.fileUpload.uploadFiles.map((item) => item?.id || item.response?.id).join(',');
      }
      // 调用表单上传接口
      this.write()
    },