el-upload的submit.finally

### el-upload 组件中的 `submit.finally` 方法

在前端开发中，当涉及到文件上传操作时，确保用户体验流畅至关重要。对于 Vue.js 的 `el-upload` 组件而言，在执行上传请求之后无论成功与否都希望触发某些特定行为来更新界面状态或通知用户进度。

针对这个问题，可以利用 JavaScript Promise 对象提供的 `.finally()` 方法[^1]。此方法会在异步操作完成后的最终阶段被调用——无论是因为解决了承诺还是拒绝了它。这意味着即使服务器返回错误响应或者网络出现问题，`.finally()` 都会被执行，从而允许清理工作如关闭加载指示器等动作得以发生。

下面是一个具体的例子展示如何结合 `el-upload` 和自定义上传函数使用 `submit.finally`：

import axios from 'axios';

export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    testUpload(content) {
      const fileObj = content.file;
      const form = new FormData();
      form.append('file', fileObj);
      
      this.loading = true;

      // 自定义上传逻辑
      axios.post('/api/upload', form, {
        headers: {'Content-Type': 'multipart/form-data'}
      })
      .then(response => {
          console.log("上传成功", response.data);
          content.onSuccess(); // 告诉 element-ui 文件已成功上传
      })
      .catch(error => {
          console.error("上传失败", error);
          content.onError(); // 处理上传失败的情况
      })
      .finally(() => {
          this.loading = false; // 不管结果怎样都要停止加载动画
      });
    }
  }
}

在这个案例里，每当发起一次新的上传请求时会设置一个标志位 (`this.loading`) 来显示正在等待服务器回应的状态；而一旦整个过程结束（不论是正常结束还是异常终止），都会进入 `.finally()` 回调内重置该标志位并隐藏任何视觉上的提示信息。