Reactjs 当用户使用react单击删除按钮时,如何停止正在进行的文件上载方法?

Reactjs 当用户使用react单击删除按钮时,如何停止正在进行的文件上载方法?,reactjs,Reactjs,我想在按下删除按钮时停止上传文件。代码可以工作,但这会将一些输出记录到控制台,以了解一些put操作 下面是代码 handle_upload = () => { this.upload(item.id); } upload = () => { AWS.config.update({ region: upload_definition.upload.region, accessKeyId: upload_definition.uploa

我想在按下删除按钮时停止上传文件。代码可以工作,但这会将一些输出记录到控制台,以了解一些put操作

下面是代码

handle_upload = () => { 
    this.upload(item.id);
}

upload = () => {
    AWS.config.update({
        region: upload_definition.upload.region,
        accessKeyId: upload_definition.upload.credentials.access_key_id,
        secretAccessKey: upload_definition.upload.credentials.secret_access_key,
        sessionToken: upload_definition.upload.credentials.session_token,
    });

    const upload = new S3.ManagedUpload({
        params: {
            Bucket: upload_definition.upload.bucket_name,
            Key: upload_definition.upload.prefix + file.name,
            Body: file,
        },
    });

    this.upload.on('httpUploadProgress', function (progress) {
        const new_percent = progress.loaded / progress.total * 100;
        const new_percent_rounded_five = Math.round(new_percent / 5) * 5;
        if (new_percent_rounded_five > self.state.percent && 
        new_percent_rounded_five <= 100) {
            self.setState({percent: new_percent_rounded_five});
        }
    });

    try {
        await upload.promise();
    } catch (error) {
        this.setState({upload_failed: true});
        return;
    }

 }
handle_upload=()=>{
此.upload(item.id);
}
上传=()=>{
AWS.config.update({
地区:upload_definition.upload.region,
accessKeyId:upload\u definition.upload.credentials.access\u key\u id,
secretAccessKey:upload\u definition.upload.credentials.secret\u access\u key,
sessionToken:upload_definition.upload.credentials.session_令牌,
});
const upload=new S3.ManagedUpload({
参数:{
Bucket:upload\u definition.upload.Bucket\u name,
键:upload_definition.upload.prefix+file.name,
正文:文件,
},
});
this.upload.on('httpUploadProgress',函数(progress){
const new_percent=progress.loaded/progress.total*100;
常数新百分比四舍五入=数学四舍五入(新百分比/5)*5;
如果(新百分比)四舍五入>self.state.percent&&
新的百分比四舍五入查看,我发现您实际上有一个
abort
方法,每当按下取消按钮时都可以调用该方法:

handle_upload = () => { 
    this.upload(item.id);
}

upload = () => {
    AWS.config.update({
        region: upload_definition.upload.region,
        accessKeyId: upload_definition.upload.credentials.access_key_id,
        secretAccessKey: upload_definition.upload.credentials.secret_access_key,
        sessionToken: upload_definition.upload.credentials.session_token,
    });

    this.uploadManager = new S3.ManagedUpload({
        params: {
            Bucket: upload_definition.upload.bucket_name,
            Key: upload_definition.upload.prefix + file.name,
            Body: file,
        },
    });

    try {
        await this.uploadManager.promise();
    } catch (error) {
        this.setState({upload_failed: true});
        return;
    }

 }

 onCancel = () => {
     this.uploadManager.abort();
 }

谢谢,但在我的案例中不起作用。在文档中,我看到这样一条说明:“在浏览器环境中调用abort()将不会中止任何已在运行中的请求。”