React实现文件上传过程中取消上传

项目中经常有上传文件的需求，有时候因为文件太大，用户没耐心继续等，或者发现上传错了，想取消上传的话，该怎么实现呢？

先看下上传文件的实现，原本的实现就是页面上一个选择文件的按钮，点击后选择文件，然后上传。选择文件的代码实现这里就不贴了，下面是上传文件的代码示例：

const uploadFile = () => {const file = selectFile();    // 自定义方法，得到上传的文件const fileType = getFileType(file); // 自定义方法，获取文件类型const uploadUrl = "https://www.example.com/uploadfile";    //文件上传的地址const response = await fetch(uploadUrl,{method: "PUT",body: file,headers: {"Content-Type" : fileType},}); if (response && response.status === 200) {console.log("upload file successfully");}}

这样的代码运行后，文件一旦开始上传就停不下来了。即使关掉页面，文件上传仍然在继续。

现在来加上取消上传的功能，我们用到的是AbortController来实现。下面代码里添加注释的部分就是新添加的取消上传及对成功取消后的处理相关代码：

const abortController = React.useRef<AbortController|null>(null);   //addconst uploadFile = () => {const file = selectFile();    const fileType = getFileType(file); const uploadUrl = "https://www.example.com/uploadfile";    abortController.current = new AbortController();    //addtry{    // handle cancel uploadconst response = await fetch(uploadUrl,{method: "PUT",body: file,headers: {"Content-Type" : fileType},signal: abortController?.current?.signal    //add}); if (response && response.status === 200) {console.log("upload file successfully");}} catch(err:any){if (err.name === 'AbortError') {console.log("upload is canceled"); } else {throw err;}}  }// add
const cancelUpload = () => {abortController?.current?.abort()
}

如果想取消上传的话，就在页面上添加一个取消按钮，点击事件就是上面的cancelUpload()方法。

点击取消后，abortController会发送一个abort信号，上传文件的请求收到这个信号就会中断，抛出一个AbortError异常，所以上面的代码也添加了try catch去处理这个异常。如果捕获到这个异常，说明上传文件的请求已经成功地取消了。

React实现文件上传过程中取消上传相关推荐

文件传输服务器异常,文件在上传过程中发生异常文件在上传过程前，安全组...
文件在上传过程前,安全组件计算散列值失败是什么意思需要把文件上传页面的网址添加到可信站点,具体操作步骤如下: 天黑路会滑,社会太复杂,还有什么东西比人心更可怕, 首先打开系统的internet选项卡 ...
tableView的plain样式的headerView的上拉过程中悬停解决方法
tableView的plain样式的headerView的上拉过程中悬停解决方法参考文章: (1)tableView的plain样式的headerView的上拉过程中悬停解决方法 (2)https: ...
文件在上传过程中发生异常服务器端,文件上传服务器端
文件上传服务器端内容精选换一换本节操作介绍本地Linux操作系统主机通过SCP向Linux云服务器传输文件的操作步骤.登录管理控制台,在ECS列表页面记录待上传文件的云服务器的弹性公网IP.上传 ...
网站搭建系列：云虚拟主机建站部署的过程中如何上传FTP？
在用云虚拟主机搭建网站的过程中,最常见的,就是用FTP上传我们的建站程序(WordPress. 米拓.织梦.帝国等)或者是网站的源代码,对于前期刚接触建站的我来说,用虚拟主机上传建站程序搭建网站是一个 ...
html中异步上传文件实现示例,HTML_html中异步上传文件实现示例，复制代码代码如下: form actio - phpStudy...
html中异步上传文件实现示例复制代码代码如下: 复制代码代码如下: 这是html中最常见最简单的表单提交方式,但是这种方式必须会切换页面,也许有些时候我们希望可以在同一个页面与服务器进行交互,并不 ...
解决百度网盘上传请求中或上传慢的方法
百度网盘正常情况下是超快的,不应该是 "上传请求中" 或几 k 的速度. 原因是因为 DNS 解释问题.尤其是海外用户.例如,使用 DNS 8.8.8.8 PS C:\WINDO ...
分析文件上传过程中的HTTP头部
分析提交的HTTP请求的头部. POST /struts-upload/upload.do?queryParam=Successful HTTP/1.1 Accept: */* Referer: ht ...
linux 环境下安装oracle11g方法及安装过程中遇上的问题解决方法
Oralce安装教程 1.先安装需要的依赖包找到哪个没有安装,直接yum install XX,直到所有的都安装完成.注意,可能一个包安装了,再次执行检查,还是提示没有安装,那么就不需要管他们了, ...
【计算机就业-校招高频面试题】面试过程中简历上的实习、项目、论文会问什么问题？
前言 hello大家好,我本次分享的主题是计算机专业校招高频面试题,我一共总结了7个问题,从自我介绍到最后的反问问题,大部分都是和自己的简历上的项目,实习,论文等相关的,大家可以根据这些问题再稍微准备 ...

React实现文件上传过程中取消上传

React实现文件上传过程中取消上传相关推荐

最新文章

热门文章