Question

我正在使用

角
火力地堡

我有什么

允许我上传到firebase存储和实时数据库的上传服务
这已经好几周了

问题

今天早上它没有用。
我没有改变与此文件或其组件有关的任何内容
我唯一改变的是firebase npm install以尝试让其他一些废话工作
这完全停止了我的项目
我的服务现在显示构建错误：

[ts]属性＆＃39; bytesTransferred＆＃39;类型＆＃39;对象＆＃39;
上不存在
[ts] Property＆＃39; totalBytes＆＃39;类型＆＃39;对象＆＃39;。
上不存在
类型的参数＆＃39;（）=＆gt;空隙＆＃39;不能分配给＆＃39;取消订阅＆＃39;类型的参数。     键入＆＃39; void＆＃39;不能指定类型＆＃39; undefined＆＃39;。

问题

有谁知道为什么会突然显示此错误消息？

我的上传服务

＆＃13;

import { Injectable, OnDestroy } from '@angular/core';
import { Upload } from './upload';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase';
import { AuthService } from '../../user/auth.service';
import { Subscription } from 'rxjs/Subscription';

// Routes
import { Router, ActivatedRoute } from '@angular/router';

@Injectable()
export class ProjectsAddService implements OnDestroy {
  private _subscription: Subscription;
  private basePath: string = '/site_photo';
  uploads: FirebaseListObservable<Upload[]>;

  constructor(
    private db: AngularFireDatabase, 
    private authService: AuthService, 
     private router: Router
  ) { }






  getUploads(query = {}) {
    this.uploads = this.db.list(this.basePath, {
      query: query
    });
    return this.uploads
  }


  deleteUpload(upload: Upload) {
    this.deleteFileData(upload.$key)
      .then(() => {
        this.deleteFileStorage(upload.name)
      })
      .catch(error => console.log(error))
  }

  // Writes the file details to the realtime db
  private deleteFileData(key: string) {
    return this.db.list(`${this.basePath}/`).remove(key);
  }

  // Firebase files must have unique names in their respective storage dir
  // So the name serves as a unique key
  private deleteFileStorage(name: string) {
    const storageRef = firebase.storage().ref();
    storageRef.child(`${this.basePath}/${name}`).delete()
  }

  ngOnDestroy() {
    if (this._subscription) {
      this._subscription.unsubscribe();
    }
  }

  submitForm(title: string, reference: string, date: string, auditorName: string, newCompanyName: string, upload: Upload) {
    this._subscription = this.authService.user.subscribe(user => {
      if (user) {

        // The User ID of the current user
        var userId = user.uid;

        // Generate a new firebase key to be used for the Project, Project List, Project Members and Storage References
        var newPostKey = firebase.database().ref().child('project_list').push().key;

        // Create a reference to the firebase storage
        const storageRef = firebase.storage().ref();
        const uploadTask = storageRef.child('site_photo/' + user.uid + '/' + newPostKey + '/site_photo').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
            upload.name = upload.file.name

            // Data to be added to the 'Project' node
            var albumDetails = {
              album_title: title,
              label_name: newCompanyName,
              album_photo: upload.url
            }

            // Data to be added to the 'Project_list' node
            var albumList = {
              label_name: newCompanyName,
              album_photo: upload.url
            }

            // Data to be added to the 'Project_members' node
            var userList = {
              [userId]: true
            }

            // Group the updates to the associated firebase nodes
            var updates = {};
            updates['/album/' + user.uid + '/' + newPostKey] = projectsDetails;
            updates['/album_list/' + user.uid + '/' + newPostKey] = projectsList;
            updates['/project_members/' + newPostKey] = userList;


            // Once the image has been successfully uploaded, make an update to the realtime database
            this.saveToRealtimeDatabase(updates);

            this.router.navigate(['projects']);
          }
        );

      }

    });


  }

  // Perform an atomic Multi-Path update
  private saveToRealtimeDatabase(updates) {
    return firebase.database().ref().update(updates);
  }


}

＆＃13;

这里的任何帮助都会非常感激。完全被这个困惑了。

更新

我注意到如果我注释掉以下代码，它会正确编译。我只是错误地读取了上传的进度。

＆＃13;

          (snapshot) => {
            // upload in progress
            upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          },
          (error) => {
            // upload failed
            console.log(error)
          },

＆＃13;

第二次更新 以下作品，但感觉有点奇怪。任何帮助将不胜感激。

＆＃13;

        var snapshotRef = snapshot as firebase.storage.UploadTaskSnapshot;
        var bytesTransferred = (snapshotRef).bytesTransferred;
        var totalBytes = (snapshotRef).totalBytes;
        upload.progress = (bytesTransferred / totalBytes) * 100;

＆＃13;

Answer 1

使用以下代码替换您的代码段。

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) =>  {
    upload.progress = (uploadTask.snapshot.bytesTransferred / uploadTask.snapshot.totalBytes) * 100;
    console.log(upload.progress);
  },

Answer 2

我不太了解打字稿或这个包来准确解释发生了什么，但至少我可以解决它。

显然，新版本中的完整回调不再接受任何返回类型，只是未定义。我认为这与返回undefined的默认Unsubscribe有关。在您的代码中，您可以通过在回调中手动返回undefined来修复错误。

() => {
    console.log('upload complete');
    return undefined;
}

Typescript显然不能在第一个回调中推断出快照的类型，你也需要手动指定它，你可以使用类型转换，或者你可以从你的回调中调用一个单独的函数。

 console.log((snapshot as firebase.storage.UploadTaskSnapshot).bytesTransferred);

如果有人有更深入的解释，我将不胜感激。

Answer 3

有同样的问题。通过设置快照类型进行修复。这是打字稿。

uploadTask.on('state_changed', (snapshot: firebase.storage.UploadTaskSnapshot) => {
    upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
}

Answer 4

我也有同样的问题我通过在构造函数之前声明uploadtask和所有其他变量然后简单地使用this.uploadTask来使用它来解决它

storageRef = firebase.storage().ref();
    file : any;
   uploadTask: any;



this.uploadTask = this.storageRef.child('images/${this.file.name}').put(this.file,metadata);

        this.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, function(snapshot){...}

Firebase＆＃39; bytesTransferred＆＃39;：Property＆＃39; bytesTransferred＆＃39;类型＆＃39;对象＆＃39;上不存在

4 个答案: