Question

嘿，我正在尝试将其排序，但我不能。

我有一个名为UploadService的服务，该服务具有一种将火灾上传到FireBase的方法。上传部分效果很好，但是，在特定页面中，我想在用户提交表单时上传文件。我无法正常工作。

问题在于该对象已在文件上传之前创建，并且我获得了URL。有人可以帮我吗？

edit.component

import { UploadService } from './../../shared/services/upload.service';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { NewsService } from '../news.service';
import { News } from '../news.model';
import { AngularFireDatabase } from '@angular/fire/database';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { AngularEditorConfig } from '@kolkov/angular-editor';

@Component({
  selector: 'app-news-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class NewsEditComponent implements OnInit {
  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no'
  };
  @ViewChild('closeBtn') closeBtn: ElementRef;
  editMode = false;
  id;
  news: any;
  newsObj: News;
  singleNews = null;
  newsForm: FormGroup;
  pic;
  constructor(private newsService: NewsService, private db: AngularFireDatabase,
              private router: Router, private route: ActivatedRoute,
              private uploadService: UploadService) { }

  ngOnInit() {
    this.getRouteID();
    this.initForm();
  }

  private initForm() {
    if (this.editMode) {
      this.news = this.newsService.getSingleNews(this.id).snapshotChanges().subscribe(
        action => {
          this.singleNews = action.payload.val();
          this.newsObj = new News(this.singleNews.id, this.singleNews.title,
            this.singleNews.subtitle, this.singleNews.article, this.singleNews.picture );
            this.newsForm.patchValue(this.singleNews);
        }
      );
      this.newsForm = new FormGroup({
        'title': new FormControl([]),
        'subtitle': new FormControl([]),
        'article': new FormControl([]),
        'picture': new FormControl([])
      });
    } else {
      this.newsForm = new FormGroup({
        'title': new FormControl(null),
        'subtitle': new FormControl(null),
        'article': new FormControl(null),
        'picture': new FormControl(null)
      });
    }
  }

  getRouteID() {
    this.route.params.subscribe(
      (param: Params) => {
        this.id = param['id'];
        this.editMode = param['id'] != null;
      }
    );
  }

  onUpload() {
    this.uploadService.uploadFile(this.pic, 'news/');
  }
  detectFiles(event) {
    this.pic = event.target.files;
  }

  onCreateNews() {
    this.onUpload();
    const id = this.createID();
    const title = this.newsForm.value.title;
    const subtitle = this.newsForm.value.subtitle;
    const article = this.newsForm.value.article;
    const picture = this.uploadService.currentUploadedFile;

    if (this.editMode) {
      const iD = this.id;
      const upNew = new News(iD, title, subtitle, picture, article);
      this.newsService.getSingleNews(this.id).update(upNew)
        .then(() => console.log('updated'))
          .catch((e) => console.log(e));
    } else {
      const newNew = new News(id, title, subtitle, picture, article);
      this.db.database.ref('news/' + newNew.getID()).set(newNew,
        (e) => {
          if (e) {
            console.log(e);
          } else {
            console.log('Data saved');
          }
        });
    }
    this.newsForm.reset();
    this.router.navigate(['/news']);
    this.closeModal();
  }

  closeModal() {
    this.closeBtn.nativeElement.click();
    this.router.navigate(['/news']);
  }

  generateID() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }

  createID() {
    return this.generateID() + this.generateID() + '-' + this.generateID() + '-' + this.generateID() +
           '-' + this.generateID() + '-' + this.generateID() + this.generateID() + this.generateID();
  }

}

upload.service.ts

import { AngularFireStorage } from '@angular/fire/storage';
import { Injectable } from '@angular/core';

@Injectable()
export class UploadService {
  constructor(private afStorage: AngularFireStorage) { }

  reference: any;
  task: any;
  uploadProgress: any;
  currentUploadedFile: any;

  uploadFile(event, path: string) {
    const upLoadId = this.createID();
    const file = event.target.files[0];
    this.reference = this.afStorage.ref(path + upLoadId);
    this.task = this.reference.put(file)
      .then( (snapshot) => {
        snapshot.ref.getDownloadURL().then( (downloadURL) => {
          this.currentUploadedFile = downloadURL;
        });
      })
      .catch( (e) => {
        console.log(e);
      });
  }

  generateID() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }

  createID() {
    return this.generateID() + this.generateID() + '-' + this.generateID() + '-' + this.generateID() +
      '-' + this.generateID() + '-' + this.generateID() + this.generateID() + this.generateID();
  }

}

edit.component.html

<div class="modal-dialog modal-dialog-centered" role="document">
  <form (ngSubmit)="onCreateNews()" [formGroup]="newsForm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle" *ngIf="!editMode">Adicionar Noticia</h5>
        <h5 class="modal-title" id="exampleModalCenterTitle" *ngIf="editMode">Editar Noticia</h5>
        <button type="button" class="close" data-dismiss="modal" #closeBtn aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">

          <div class="row">
            <div class="col form-group">
              <label for="newsTitle">Titulo</label>
              <input type="text" class="form-control" name="title" id="title" formControlName="title">
            </div>
          </div>

          <div class="row">
              <div class="col form-group">
                <label for="subtitle">Sub Titulo</label>
                <input type="text" class="form-control" name="subtitle" id="subtitle" formControlName="subtitle">
              </div>
            </div>

          <div class="row">
            <div class="col form-group">
              <label for="article">Noticia</label>
              <angular-editor formControlName="article" [config]="editorConfig"></angular-editor>
            </div>
          </div>

          <div class="row">
            <div class="col form-group">
              <label for="picture">Picture</label>
              <input type="file" name="picture" id="picture" (change)="detectFiles($event)" formControlName="picture" class="form-control">
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="closeModal()">Close</button>
        <button type="submit" class="btn orange-btn" *ngIf="editMode">Salvar Mudancas</button>
        <button type="submit" class="btn orange-btn" *ngIf="!editMode">Adicionar Noticia</button>
      </div>
    </div>
  </form>
</div>

更新：

我实际上只是意识到一件事。我认为问题是在onDetectFile(event)和onUpload()方法之间发生的。这是处理HTML上的FILE类型的方法吗？我收到此错误：

VM6925 NewsEditComponent.ngfactory.js：167错误TypeError：无法读取未定义的属性“文件” 在UploadService.push ../ src / app / shared / services / upload.service.ts.UploadService.uploadFile（VM6905 main.js：1749）在NewsEditComponent.push ../ src / app / news / edit / edit.component.ts.NewsEditComponent.onUpload（VM6905 main.js：1131）中在NewsEditComponent.push ../ src / app / news / edit / edit.component.ts.NewsEditComponent.detectFiles（VM6905 main.js：1136）中在Object.eval [作为handleEvent]（VM6925 NewsEditComponent.ngfactory.js：193）在handleEvent（VM6904 vendor.js：43356）在callWithDebugContext（VM6904 vendor.js：44449）在Object.debugHandleEvent [作为handleEvent]（VM6904 vendor.js：44152）在dispatchEvent（VM6904 vendor.js：40815）在VM6904 vendor.js：41259 在HTMLInputElement。（VM6904 vendor.js：60432）

服务承诺返回后执行下一个链接。角火力基地

0 个答案: