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);   //add

const uploadFile = () => {
    const file = selectFile();    
    const fileType = getFileType(file); 
    const uploadUrl = "https://www.example.com/uploadfile";    

    abortController.current = new AbortController();    //add

    try{    // handle cancel upload
        const 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去处理这个异常。如果捕获到这个异常，说明上传文件的请求已经成功地取消了。