526互联

antd upload vue3 取消请求，取消进行中的接口请求

发布时间 2023-08-02 16:08:25作者: 飞天龙猫

在使用antd upload组件时，大文件上传等待时长太久，在上传过程中想取消上传，即取消进行中的接口请求。不解释，上代码：

import axios from 'axios';

<a-upload
          v-model:file-list="fileList"
          name="file"
          :multiple="true"
          :action= 'Action'
          :headers="headers"
          @change="handleChange"
          :customRequest="customRequest"
          accept=".pdf, .jpg, .png"
          :before-upload="beforeUploadFile"
        >
          <a-button class="mdcBtn" size="small">
            <i class="iconfont icon-shangchuan" style="margin-right: 5px;"></i>
            <span>上传文件</span>
          </a-button>
          <span style="margin-left: 10px;">（注：支持pdf、png、jpg格式，大小不超过5M）</span>
        </a-upload>

const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      const customRequest = (info: FileInfo) => {
        axios.post(Action.value, form, {
          cancelToken: source.token
        })
          .then((data) => {
          });

      };

const deleteFile = (val) => {
        if(val.id) {
        } else {
          source.cancel('cancel upload');
        }
      };

代码有冗余，哪有免费午餐，凑合吃吧！