vue上传取消关闭loading

在Vue中，我们可以使用`axios`和`vue-axios`库进行文件上传。要取消上传并关闭loading，我们可以在`axios`请求中添加`cancelToken`和`source`，然后在取消上传时调用`cancel()`方法。

以下是一个简单的例子：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="cancelUpload">取消上传</button>
    <div v-if="loading">正在上传...</div>
  </div>
</template>

<script>
import axios from 'axios';
import VueAxios from 'vue-axios';

export default {
  data() {
    return {
      file: null,
      loading: false,
      source: null
    }
  },
  methods: {
    handleFileUpload(e) {
      this.file = e.target.files[0];
      this.uploadFile();
    },
    uploadFile() {
      this.loading = true;

      const formData = new FormData();
      formData.append('file', this.file);

      this.source = axios.CancelToken.source();

      this.$http.post('/upload', formData, {
        cancelToken: this.source.token
      })
      .then(() => {
        this.loading = false;
        console.log('文件上传成功');
      })
      .catch((error) => {
        if (axios.isCancel(error)) {
          console.log('上传已取消');
        } else {
          console.log('上传失败', error);
        }
        this.loading = false;
      });
    },
    cancelUpload() {
      this.source.cancel('上传已取消');
    }
  },
  created() {
    Vue.use(VueAxios, axios);
  }
}
</script>

在上面的代码中，我们定义了一个`source`对象，并在点击“取消上传”按钮时调用`cancel()`方法来取消上传。当上传被取消时，`axios`会抛出一个`Cancel`错误，我们可以通过`axios.isCancel(error)`来判断是否是取消错误，并在控制台中打印出相应的消息。

同时，我们可以根据`loading`的状态来控制loading的显示和隐藏。当上传开始时，我们将`loading`设置为true，当上传完成或者被取消时，将其设置为false。

请注意，如果您使用的是其他库或自己封装的上传方法，取消上传的方式可能会有所不同。