首页 > 其他分享 >antd upload vue3 取消请求,取消进行中的接口请求

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

时间:2023-08-02 16:11:28浏览次数:33  
标签:axios const 请求 取消 upload source 上传

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

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

标签:axios,const,请求,取消,upload,source,上传
From: https://www.cnblogs.com/midnight-visitor/p/17600947.html

相关文章

  • flask as_view源码,请求响应,cookie,session
    1CBV1cbv写法 -1写个类,继承MethodView-2在类中写跟请求方式同名的方法-3注册路由:app.add_url_rule('/home',view_func=Home.as_view('home'))#home是endpoint,就是路由别名2cbv加装饰器 -方式一: classHome(MethodView): decorators=[auth]#......
  • 处理API请求并行问题
    背景:我们有一个导出全部数据的功能,因为各种原因,可能需要同时发送10几条请求来获取数据遇到的问题:因为浏览器http/1.1最多同时进行6个请求,所以会阻塞用户的其他操作打个比喻:之前我们是一个赛道,可以上6个任意国家的运动员,第七个人想上去就得排队现在改为了两个赛......
  • http请求
    http示例API代码Code从网络获取数据1 概述日常生活中我们使用应用程序看新闻、发送消息等,都需要连接到互联网,从服务端获取数据。例如,新闻应用可以从新闻服务器中获取最新的热点新闻,从而给用户打造更加丰富、更加实用的体验。那么要实现这样一种能实时从服务端获取数......
  • 使用 Axios 进行 HTTP GET 请求的详尽指南
    在进行网络请求时,axios 是一个非常常用的请求库。本文将介绍如何使用axios发起GET请求,并详细列出传参的几种写法。同时会提供一个实践案例,其中包含基本路由与请求处理的过程,并确保在IDE编辑器中可以顺利运行。什么是axios的GET请求?在开始之前,让我们简要了解一下axios......
  • System.Web.HttpException:“超过了最大请求长度。”
    BUG:前端想后端发送坐标数组,控制器出现了如下报错: Answer:该错误提示表明你的HTTP请求超过了服务器允许的最大请求长度。这是为了防止恶意攻击或意外的大型请求对服务器造成压力。为了解决这个问题,你可以尝试以下几种方法:增加服务器的最大请求长度:你可以在服务器的配置中......
  • PHPGET请求的加密方法简介
    PHPGET请求的加密方法简介在Web开发中,经常会使用GET请求来获取远程服务器上的数据。然而,GET请求的数据通过URL传递,容易被拦截者获取并窃取其中的敏感信息。为了解决这个问题,我们可以采用加密方法来保护数据的安全性。PHPGET请求的加密方法简介下面介绍几种PHPGET请求的加密方法......
  • 请求示例curl获取淘宝1688京东等电商平台商品详情数据API接口,批量采集
    获得页面使用命令:curlhttp://curl.haxx.se这是最简单的使用方法。用这个命令获得了http://curl.haxx.se指向的页面,同样,如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地。如果下载的是HTML文档,那么缺省的将只显示文件头部,即HTML文档的header。要全部显示,请加参数......
  • 电商API接口系列商品详情关键词搜索评论等数据,亲测有效,请求示例说明
    在电商运营活动中,价格是贯穿始终的关键因素,而品牌方有效利用价格数据也能够推动企业更好的发展。当品牌方能够精准获取商品的到手价时,有利于做好商品的定价复盘工作、后续的价格分析工作,也能够为后面的调价作参考;当品牌方能够全面掌握到商品的历史价时,就能够更好的把握商品不同时......
  • 请求示例 url 默认请求参数API接口,淘宝天猫1688拼多多商品详情接口
     item_get-获得淘宝商品详情onebound.taobao.item_getAPI接口工具请求参数请求参数:num_iid=520813250866&is_promotion=1参数说明:num_iid:淘宝商品IDis_promotion:是否获取取促销价响应参数Version:Date:2022-04-04名称类型必须示例值描述itemitem[]1宝贝详情数据num_iidBigint1......
  • 多种语言请求【淘宝京东1688拼多多API】平台数据的方式
    首先我们以taobao商品页面采集商品详情数据为例:请求方式:HTTPS POST GET请求地址:API接口请求参数请求参数:num_iid=669646899650&is_promotion=1参数说明:num_iid:淘宝商品IDis_promotion:是否获取取促销价请求示例Python#coding:utf-8"""Compatibleforpython2.xandpyt......