Question

不幸的是，我目前正试图摆脱Firebase及其存储系统的困扰，但是我没有注册任何文件。据我一直在努力使它起作用，我唯一能得到的结果就是将自己插入实时数据库的奇怪的“ C：// fakepath- [filename]”。即使在公共模式下通过了存储的安全规则后，文件本身也不会上传。此外，即使我认为这并不重要，我仍在使用最新版本的angular。

我将尝试总结逻辑，以便您能了解正在做的事情。总而言之，我有一个包含一些旨在处理图库系统的功能的服务。在名为gallery.service.ts的文件中，我放置了一个保存函数，其含义如下：

saveImage() {

  var images = this.images // There is a "images" class variable that contains all the images which has to be registered

  images.forEach((img,index)=>{

    for(let key in img){
      firebase.database().ref('/images/'+ index + '/' + key).set(img[key])
    }

    let storageRef = firebase.storage().ref('/images/' + index + '/image_file')
    storageRef.put(img.imageFile)

  })

我通过将此服务包含在from组件中来使用此服务，该组件的作用是收集生成Image对象所需的某些字段。

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormBuilder } from '@angular/forms'
import { Image } from '../../model/image.model'
import { GalleryService } from '../../services/gallery/gallery.service'
import { Subscription } from 'rxjs'

@Component({
  selector: 'app-form-add-image',
  templateUrl: './form-add-image.component.html',
  styleUrls: ['./form-add-image.component.css']
})

export class FormAddImageComponent implements OnInit {

  imageForm: FormGroup;
  images: Image[] = [];
  imagesSubscription : Subscription

  constructor(private formBuilder: FormBuilder,
              private galleryService : GalleryService
  ) { }

  ngOnInit() {
    this.initForm();

    this.galleryService.getImages()

    this.imagesSubscription = this.galleryService.imagesSubject.subscribe(
      (images: Image[]) => {
        this.images = images
      }
    );

  }

  initForm() {
    this.imageForm = this.formBuilder.group({
      imageName: '',
      imageDescription: '',
      imageAlt: '',
      imageFile: ''
    });
  }

  onSubmitForm() {
    const formValue = this.imageForm.value;

    var idNewImg = this.images.length
    var newImage = new Image(
      idNewImg,
      formValue['imageName'],
      formValue['imageDescription'],
      formValue['imageAlt'],
      formValue['imageFile']

    )
    this.images.push(newImage)
    this.galleryService.saveImage();

  }
}

这里是表单模板，以防万一：

<form [formGroup]='imageForm' (ngSubmit)='onSubmitForm()'>

  <label for="imageName"> Image Name </label>
  <input id='imageName' name="imageName" formControlName="imageName"/>
  <label for="imageDescription"> Image Description </label>
  <input  id='imageDescription' name="imageDescription" formControlName="imageDescription"/>
  <label for="imageAlt"> Image Alt </label>
  <input id='imageAlt' name="imageAlt" formControlName="imageAlt"/>
  <label for="imageFile"> Image File </label>
  <input type = 'file' id='imageFile' name="imageFile" formControlName="imageFile"/>
  <label for='submit'> Envoyer </label>
  <input type='submit' id='submit' />

</form>

我的图像模式如下：

export class Image{
  constructor(
    public id : number,
    public imageName: string,
    public imageDescription: string,
    public imageAlt:  string,
    public imageFile: any
  ){

  }
}

有人知道为什么上传不正确吗？

我无法将文件保存在Firebase存储中

0 个答案: