时间戳

首页 > 解决方案 > 当用户使用反应单击删除按钮时，如何停止正在进行的上传文件方法？

reactjs - 当用户使用反应单击删除按钮时，如何停止正在进行的上传文件方法？

问题描述

我想在按下删除按钮时停止上传文件。该代码有效，但这会将一些关于某些 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;
    }

 }

上面的代码工作正常。在上传文件时，我可以单击取消按钮取消上传文件。这样做时，它会在控制台中留下对 s3 的访问被阻止和其他错误的日志。当使用 Promise 在 React 中单击取消按钮时，我该如何修复它们或中止此加载。

有人可以帮我解决这个问题。谢谢。

标签： reactjs

解决方案

查看文档，我发现您实际上有一个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();
 }

推荐阅读