Element-UI调用this.$refs.upload.submit()无法获取返回响应如何解决

问题说明 #

Element UI 原生的this.$refs.upload.submit()方法没有返回Promise实例，因此直接通过.then/.catch链式调用的方式无法捕获上传结果，可通过以下两种官方兼容的方案实现需求。

方案1：使用组件原生事件回调（推荐） #

Element UI Upload组件原生提供on-success、on-error两个事件，分别对应上传成功、上传失败的回调，可直接在组件上绑定使用：

1. 组件配置示例

<el-upload
  ref="upload"
  action="你的上传接口地址"
  :auto-upload="false" <!-- 关闭自动上传，手动触发submit -->
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  <!-- 其他配置如headers、data、limit等按业务需求添加 -->
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="triggerUpload">上传到服务器</el-button>
</el-upload>

2. 逻辑代码示例

methods: {
  // 手动触发上传
  triggerUpload() {
    this.$refs.upload.submit();
  },
  // 上传成功回调，response为接口返回的完整响应内容
  handleUploadSuccess(response, file, fileList) {
    this.success = true;
    // 其他成功后的业务逻辑
  },
  // 上传失败回调，err为接口返回的错误对象
  handleUploadError(err, file, fileList) {
    // 若获取不到status可打印完整err对象，部分版本Element UI状态码存放在err.response.status
    if(err.status === 422 && this.hasError('Exists')) {
      this.Link = true;
    }
    this.success = false;
    // 其他错误处理逻辑
  }
}

该方案无需额外封装，完全符合官方组件设计，适配所有Element UI版本，适合绝大多数业务场景。

方案2：封装submit方法返回Promise #

如果业务场景需要使用Promise链式调用的写法，可自行对上传方法做一层封装：

methods: {
  // 封装上传方法，返回Promise实例
  submitUpload() {
    const uploadRef = this.$refs.upload;
    // 暂存原有回调，避免覆盖业务已有逻辑
    const originSuccess = uploadRef.onSuccess;
    const originError = uploadRef.onError;

    return new Promise((resolve, reject) => {
      // 重写成功回调
      uploadRef.onSuccess = (res, file, list) => {
        originSuccess?.(res, file, list);
        resolve(res);
        // 恢复原有回调
        uploadRef.onSuccess = originSuccess;
        uploadRef.onError = originError;
      };
      // 重写失败回调
      uploadRef.onError = (err, file, list) => {
        originError?.(err, file, list);
        reject(err);
        // 恢复原有回调
        uploadRef.onSuccess = originSuccess;
        uploadRef.onError = originError;
      };
      // 触发上传
      uploadRef.submit();
    })
  },
  // 调用上传的逻辑
  triggerUpload() {
    this.submitUpload()
      .then(response => {
        this.success = true;
      })
      .catch(errors => {
        if(errors.status === 422 && this.hasError('Exists')) {
          this.Link= true;
        }
        this.success = false;
      })
  }
}

注意：如果存在多文件上传场景，需要调整封装逻辑处理多个文件的回调触发问题，避免Promise提前返回。

内容的提问来源于stack exchange，提问作者Cepturion