XMLHttpRequest没有停止

Question

我有一个XHR上传文件。 用户可以单击按钮来取消上传。

然后将file.canceled设置为true 。 我正在检查onprogress事件，是否已取消上传。

如果取消，则调用xhr.DONE 。 但是，这根本不会停止上传过程。

代码 （我使用的是Angular 6，所以是Typescript）

upload(f: ProductFile): Observable<ProductFile> {
    var file: ProductFile;
    this.store$.pipe(
        select(FilesSelectors.getFileById(f._id)),
    ).subscribe((file: ProductFile) => file = file)
    return new Observable((observer) => {
        let xhr = new XMLHttpRequest();
        let progress: number = 0;
        xhr.upload.onprogress = (event: ProgressEvent) => {
            if (event.lengthComputable) {
                progress = 100 * (event.loaded / event.total);
                this.store$.dispatch(new FilesActions.UploadProgress({
                    ...file, progress, uploaded: false, uploading: true,
                }));
            }
            if (file.canceled) {
                observer.error('canceled')
                observer.complete();
                xhr.DONE;
            }
        }
        xhr.responseType = 'json';
        xhr.open('POST', `${this.httpService.url}/files/upload`, true);
        xhr.setRequestHeader('Authorization', this.httpService.token);
        xhr.send(f.formData);
        xhr.onload = () => {
            const finishedFile: ProductFile = {
                ...f,
                url: xhr.response,
                uploaded: true,
                uploading: false,
                progress: 100,
            };
            observer.next(finishedFile);
            observer.complete();
            xhr.DONE;
        }
    });
}

所以我的目标是在file.canceled等于true时中止上传过程

Answer 1

尝试使用XMLHttpRequest对象的abort（）方法而不是DONE。

像这样：

xhr.abort();