Angular Firebase 存储，将用户输入属性分配给实时数据库

Posted 2023-03-13

【中文标题】Angular Firebase 存储，将用户输入属性分配给实时数据库

【英文标题】：Angular Firebase Storage, Assigning User Input Properties to Real Time Database

【发布时间】：2018-06-04 17:46:37

【问题描述】：

我想将文件（尤其是图像）上传到我的 Firebase 存储。我从这个link 中找到了一个教程。我将 url 和 file 等更多属性添加到现有类中，并按照该链接上的函数模板进行操作。但显然我做错了什么。上传到我的存储的文件和控制台日志没有返回任何错误。我需要帮助以正确分配用户输入的其他属性，例如 prdName、prdCategory 和 prdSup。有人可以帮我解决这个问题吗？

//product.ts

export class Product 
  $prdKey: string;
  prdName: string;
  prdCategory: string; //Category
  prdSup: string; //supplier
  prdDescription: string;

  prdImage: string; //name
  prdUrl: string; //url
  file: File;

  constructor(file: File) 
    this.file = file;
  

//service.ts
variable: any;
selectedProduct: Product = new Product(this.variable); //-->there was an error here that said expected 1 argument but got 0 so i add variable:any;

private basePath = '/product';

pushFileToStorage(Product: Product, progress: 
  percentage: number
) 
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`$this.basePath/$Product.file.name`).put(Product.file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
    (snapshot) => 
      // in progress
      const snap = snapshot as firebase.storage.UploadTaskSnapshot
      progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100)
    ,
    (error) => 
      // fail
      console.log(error)
    ,
    () => 
      // success
      /*--What should i assign here?--*/
      Product.prdName = Product.file.name,
      Product.prdCategory = Product.file.name,
      Product.prdSup = Product.file.name,
      Product.prdDescription = Product.file.name,
      /*------------------------------------------*/
      Product.prdUrl = uploadTask.snapshot.downloadURL,
      Product.prdImage = Product.file.name,
      
      this.saveFileData(Product)
    
  );


private saveFileData(Product: Product) 
  this.firebase.list(`$this.basePath/`).push(Product);

//component.ts

upload() 
  const file = this.selectedFiles.item(0);
  this.currentFileUpload = new Product(file);
  this.ProductService.pushFileToStorage(this.currentFileUpload, this.progress);

<!--component.html-->
<!--form snippet-->
<form #productForm="ngForm" (ngSubmit)="upload()">
<div class="form-group">
  <label>Product Name</label>
  <input class="form-control" name="prdName" #prdName="ngModel" [(ngModel)]="ProductService.selectedProduct.prdName">
</div>
<button type="submit" class="btn btn-primary">Submit</button> 
</form>

如果需要更多的 sn-ps，请告诉我。提前谢谢你。

（更新） 我将推送功能放在//success 条件中，但是我不确定为每个类属性分配什么。 Product.prdName = Product.file.name, 会给我prdName 等于文件名。我试过Product.prdName = selectedProduct.prdName,，但看起来不正确。

【问题讨论】：

堆栈溢出不是一种非常有效的调试机制。您是否已经在调试器中单步执行了代码？如果是这样，Product.prdUrl = uploadTask.snapshot.downloadURL 是否将正确的值分配给 Product.prdUrl？

我更新了我的一些代码

【参考方案1】：

我想通了，它应该看起来像这样，对我有用：D

() => 
  // success
  this.productList.push(
    prdName: this.selectedProduct.prdName,
    prdCategory: this.selectedProduct.prdCategory,
    prdSup: this.selectedProduct.prdSup,
    prdDescription: this.selectedProduct.prdDescription,
    prdUrl: this.selectedProduct.prdUrl = uploadTask.snapshot.downloadURL,
    prdImage: this.selectedProduct.prdImage = Product.file.name,
  )

  this.saveFileData(Product)