如何在Vue中取消文件上传_如何在vue中取消移位/推送图片到列表_如何在.vue文件中包含css文件？ - 腾讯云开发者社区

如何在Vue中取消文件上传

在Vue中取消文件上传通常涉及到使用XMLHttpRequest（XHR）或者Fetch API来控制上传过程。以下是使用Vue 3和Fetch API取消文件上传的方法：

基础概念

Fetch API：Fetch API 提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取（或发送）资源。
AbortController：这是一个用于中止一个或多个Web请求的实用工具。Fetch API结合AbortController可以很容易地取消正在进行的请求。

类型

Fetch API：用于发起网络请求。
AbortController：用于中止Fetch API发出的请求。

应用场景

用户在上传大文件时可能需要取消操作。
在表单验证失败后，可能需要取消之前的上传请求。

示例代码

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="cancelUpload">取消上传</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const controller = new AbortController();
    let uploadPromise = null;

    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        uploadPromise = uploadFile(file, controller.signal);
      }
    };

    const cancelUpload = () => {
      controller.abort();
    };

    const uploadFile = async (file, signal) => {
      try {
        const formData = new FormData();
        formData.append('file', file);

        const response = await fetch('https://example.com/upload', {
          method: 'POST',
          body: formData,
          signal: signal // Pass the signal to the fetch request
        });

        if (!response.ok) {
          throw new Error('上传失败');
        }

        return await response.json();
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('上传已取消');
        } else {
          console.error('上传过程中发生错误:', error);
        }
      }
    };

    return {
      handleFileChange,
      cancelUpload
    };
  }
};
</script>