发布于 2017-02-14 20:38:47
我建议使用包装为可观察的本机JavaScript XHR,很容易自己创建:
upload(file: File): Observable<string | number> {
let fd: FormData = new FormData();
fd.append("file", file);
let xhr = new XMLHttpRequest;
return Observable.create(observer => {
xhr.addEventListener("progress", (progress) => {
let percentCompleted;
// Checks if we can really track the progress
if (progress.lengthComputable) {
// progress.loaded is a number between 0 and 1, so we'll multiple it by 100
percentCompleted = Math.round(progress.loaded / progress.total * 100);
if (percentCompleted < 1) {
observer.next(0);
} else {
// Emit the progress percentage
observer.next(percentCompleted);
}
}
});
xhr.addEventListener("load", (e) => {
if (e.target['status'] !== 200) observer.error(e.target['responseText']);
else observer.complete(e.target['responseText']);
});
xhr.addEventListener("error", (err) => {
console.log('upload error', err);
observer.error('Upload error');
});
xhr.addEventListener("abort", (abort) => {
console.log('upload abort', abort);
observer.error('Transfer aborted by the user');
});
xhr.open('POST', 'http://some-dummy-url.com/v1/media/files');
// Add any headers if necessary
xhr.setRequestHeader("Authorization", `Bearer rqrwrewrqe`);
// Send off the file
xhr.send(fd);
// This function will get executed once the subscription
// has been unsubscribed
return () => xhr.abort()
});
}这就是人们如何使用它的方式:
// file is an instance of File that you need to retrieve from input[type="file"] element
const uploadSubscription = this.upload(file).subscribe(progress => {
if (typeof progress === Number) {
console.log("upload progress:", progress);
}
});
// To abort the upload
// we should check whether the subscription is still active
if (uploadSubscription) uploadSubscription.unsubscribe();https://stackoverflow.com/questions/42231123
复制相似问题