Question

我已成功将图像上传到Firebase存储，但是无法将图像URL存储在Firestore中。

尝试查看图像时，我在控制台上收到错误：

core.js：6462警告：清理不安全的URL值 C：\ fakepath \ coke.jpg（请参阅http://g.co/ng/security#xss）
获取不安全的代码：C：\ fakepath \ coke.jpg净值：: ERR_UNKNOWN_URL_SCHEME

下面是html代码：（details.page.html）

<!-- PRODUCT PICTURE INPUT -->

  <ion-item>
    <ion-label position="stacked">Product Picture</ion-label>
    <ion-input accept="image/*" type="file" name="productPics" formControlName="productPics" (change)="showPreview($event)"></ion-input>
  </ion-item>

下面是打字稿代码：（details.page.ts）

ngOnInit() {
this.productForm = this.fb.group({
  productPics: new FormControl('', Validators.compose([
    Validators.required,
  ])),
});
this.resetForm();
}

showPreview(event: any) {
if (event.target.files && event.target.files[0]) {
   const reader = new FileReader();
   reader.onload = (e: any) => this.imgSrc = e.target.result;
   reader.readAsDataURL(event.target.files[0]);
   this.selectedImage = event.target.files[0];
 } else {
   this.imgSrc = "./assets/default_image.jpg";
   this.selectedImage = null;
 }
}

async saveProduct(formValue) {

this.isSubmitted = true;

this.product.userId = this.authService.getAuth().currentUser.uid;

if (this.productId) {
  try {
  this.product.createdAt = new Date().getTime();

    console.log('product add');
    console.log(this.productForm.value);

    var filePath = `${formValue.productCategory}/${this.selectedImage.name}${new Date().getTime()}`;
    const fileRef = this.storage.ref(filePath);
    this.storage.upload(filePath, this.selectedImage).snapshotChanges().pipe(
      finalize(() => {
        fileRef.getDownloadURL().subscribe((url) => {
          formValue['productPics'] = url;
          this.service.insertImageDetails(formValue);
          this.resetForm();
        })
      })
    ).subscribe();

    await this.productService.addProduct(this.product);
    await this.loading.dismiss();

    this.navCtrl.navigateBack('/vendor-tabs/home-vendor');
  } catch (error) {
    console.log('product dont add');
    this.presentToast('Error trying to save');
  }
}
}

以下是服务：（product.service.ts）

private productsCollection: AngularFirestoreCollection<Product>;

addProduct(product: Product) {
return this.productsCollection.add(product);
}

getProduct(id: string) {
return this.productsCollection.doc<Product>(id).valueChanges();
}

updateProduct(id: string, product: Product) {
return this.productsCollection.doc<Product>(id).update(product);
}

deleteProduct(id: string) {
return this.productsCollection.doc(id).delete();
}

insertImageDetails(image) {
this.productsCollection.add(image);
}

无法将图片网址存储在Firestore

0 个答案: