使用无效数据调用的函数 DocumentReference.set()

Question

我正在尝试将图片和标题从 Angular 网站上传到 Firestore。

这是我的模板。

<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
    <div class="form-group">
        <input type="text" name="title" id="title" #title="ngModel" [(ngModel)]="service.timetable.title">
    </div>
    <div class="form-group">
        <input hidden type="text" name="id" id="id" #id="ngModel" [(ngModel)]="service.timetable.id">
    </div>
    <div class="form-group">
        <input hidden type="text" name="imgurl" id="imgurl" #imgurl="ngModel" [(ngModel)]="service.timetable.imgurl">
    </div>
    <div class="form-group">
        <input type="file" name="timetable" id="timetable" (change)="uploadImage($event)">
    </div>
    <div>

    </div>
    <button type="submit">Submit</button>
</form>

这是我的打字稿文件

import { TimetableService } from './../../shared/timetable.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { NgForm } from '@angular/forms';
import { AngularFireStorage } from '@angular/fire/storage';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-timetable',
  templateUrl: './timetable.component.html',
  styleUrls: ['./timetable.component.css']
})
export class TimetableComponent implements OnInit {

  selectedFile =null;

  constructor(private storage: AngularFireStorage, private firebase: AngularFirestore, private service: TimetableService) { }

  ngOnInit() {
    this.resetForm();

  }

  resetForm(form?: NgForm){
    if(form!=null)
    form.resetForm();
    this.service.timetable ={
      id: null,
      title:"",
      imgurl:""
    };
  }

  async onSubmit(form: NgForm){

    let dataa = Object.assign({},form.value);// id, imgurl, title
    delete dataa.id;
    let filepath = 'timetable'+ dataa.title;
    const task =this.storage.upload(filepath, this.selectedFile );
    await task;
    const imageurl =(await task).downloadURL;

    dataa.imgurl = imageurl;

    this.firebase.collection('timetabledata').add(dataa);

  }

  uploadImage(event){
    this.selectedFile = event.target.files[0];
  }

}

当我点击提交按钮时出现此错误

ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field imgurl)
FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field imgurl)
    at new FirestoreError (index.cjs.js:350)
    at ParseContext.push../node_modules/@firebase/firestore/dist/index.cjs.js.ParseContext.createError (index.cjs.js:20355)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseScalarValue (index.cjs.js:20702)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseData (index.cjs.js:20568)
    at index.cjs.js:20584
    at forEach (index.cjs.js:454)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseObject (index.cjs.js:20583)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseData (index.cjs.js:20542)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseSetData (index.cjs.js:20407)
    at DocumentReference.push../node_modules/@firebase/firestore/dist/index.cjs.js.DocumentReference.set (index.cjs.js:21384)
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:707
    at fulfilled (tslib.es6.js:70)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39698)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)

我想将图像上传到 Firestore 存储，获取 downloadUrl，然后将 title 和 downloadUrl 保存在 firestore 中。当我需要编辑记录时，我需要将这些数据放入表单中。 我应该怎么做才能解决这个问题？

我对问题进行了编辑。以前错误发生在“id”字段中，我已经修复了它。这是一个愚蠢的错误。但现在它发生在“imgurl”字段中。

Answer 1

imageUrl 未定义，因此您遇到了该错误，在 upload 方法之后，您需要执行以下操作：

 onSubmit(form: NgForm){
    let dataa = Object.assign({},form.value);// id, imgurl, title
    delete dataa.id;
    let filepath = 'timetable'+ dataa.title;
    const fileRef = this.storage.ref(filepath);
    const task =this.storage.upload(filepath, this.selectedFile);
    task.snapshotChanges().pipe(
      finalize(() => {
        fileRef.getDownloadURL().subscribe(url => {
          console.log(url); // <-- do what ever you want with the url..
        dataa.imgurl = url;
        this.firebase.collection('timetabledata').add(dataa);
        });
      })
    ).subscribe(); 
  }

getDownloadURL() 方法不再依赖于任务，因此，为了获取 url，我们应该在存储引用之上使用 RxJS 的 finalize 方法。

查看文档：

https://github.com/angular/angularfire/blob/master/docs/storage/storage.md