Vue中如何取消文件上传

Question

我有一个post方法

uploadFile: async function () {
  const formData = new FormData();
  formData.append("file", this.file);
  let url = `http://...`;
  try {
    this.source = axios.CancelToken.source();
    const res = await axios.post(url, formData, {
      headers: {
        Authorization: "Token " + this.$store.getters.getToken,
        "Content-Type": "multipart/form-data",
      },
      cancelToken: this.source.token,
    });
  } catch (error) {
  }
}

和取消方法

  cancelLoad: function () {
      this.source.cancel('cancel upload');
  },

请求被取消，但在重新加载我的页面后，文件上传了。

Answer 1

我已经解决了。

const CancelToken = axios.CancelToken;
let cancel;

const res = await axios.post(url, formData, {
      headers: {...},
      cancelToken: new CancelToken(function executor(c) {
        cancel = c;
      }),
}...

cancel();