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

在使用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');
        }
      };

代码有冗余,哪有免费午餐,凑合吃吧!

posted @ 2023-08-02 16:04  飞天龙猫  阅读(368)  评论(0编辑  收藏  举报