发布到 Firebase 数据库参考之前的 Firebase 存储下载 URL答案

【问题标题】：Firebase Storage Download URL Before Posting to Firebase Database Reference发布到 Firebase 数据库参考之前的 Firebase 存储下载 URL
【发布时间】：2017-12-11 15:50:04
【问题描述】：

使用 firebase 处理 Angular 4 项目。

我正在努力研究如何保证在运行下一步之前已从 Observable 返回结果。

我知道你不能用 Observable 保证这一点，因为重点是它是一个数据流，因此我的困境。

我正在尝试将图像上传到 firebase 存储，在运行对 firebase 数据库的更新之前检索其下载 URL。

任何建议将不胜感激。

注册用户服务

$key: string;
    downloadUrl: string;
    currentUser: any;
    loginId: string;

    constructor(
        private db: AngularFireDatabase,
        private firebaseUploadService: FirebaseUploadService,
        private authService: AuthService) {
        this.firebaseUploadService.currentUrl.subscribe(url => this.downloadUrl = url);
    }

registerUser(firebaseRef: string, user: UserModel): Observable<any> {

        // Create a separate object for file upload with the file passed via the entity
        const file = Object.assign(<UploadModel>{}, user.imagePath);
        user.$key = this.authService.currentUserId;

        return this.firebaseUploadService.pushUpload(user.$key, file).switchMap(upload => {
            console.log('upload returned from service: ', upload)
            user.imagePath = this.downloadUrl;
            return Observable.fromPromise(this.db.object(firebaseRef + '/' + user.$key).update(user));
        });
    }

Firebase 上传服务

    currentUser: any;
    uploads: FirebaseListObservable<UploadModel[]>;

    private urlSource = new BehaviorSubject('http://saveabandonedbabies.org/wp-content/uploads/2015/08/default.png');
    currentUrl = this.urlSource.asObservable();

    constructor() {
    }

pushUpload(firebaseRef: string, upload: UploadModel): any {

        const storageRef = firebase.storage().ref();
        const uploadTask = storageRef.child(`${firebaseRef}/${upload.file.name}`).put(upload.file);

        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
            (snapshot) => {
                // upload in progress
                upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            },
            (error) => {
                // upload failed
                console.log(error)
            },
            () => {
                // upload success
                upload.url = uploadTask.snapshot.downloadURL
                this.urlSource.next(upload.url)
                upload.name = upload.file.name
            }
        );
        return this.urlSource;
    }

【问题讨论】：

标签： angular typescript firebase firebase-storage angularfire2

【解决方案1】：

由于所有 Firebase 调用都是异步的，因此您无法同步获取下载 url。但是有一个作弊方法，你可以使用 Promise 来做到这一点。

尝试重构您的代码，如下所示：

pushUpload(firebaseRef: string, upload: UploadModel): any {

    const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${firebaseRef}/${upload.file.name}`).put(upload.file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
        (snapshot) => {
            // upload in progress
            upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        },
        (error) => {
            // upload failed
            console.log(error)
        },
        () => {
            // upload success
            upload.url = uploadTask.snapshot.downloadURL
            this.urlSource.next(upload.url)
            upload.name = upload.file.name
          user.imagePath = this.downloadUrl;
    // Place your http request inside a firebase event
        return Observable.fromPromise(this.db.object(firebaseRef + '/' + user.$key).update(user));
        }
    );
    return this.urlSource;
}

这可能有效

【讨论】：