如何在Vue中取消文件上传

<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>