При отправке данных формы вместе с загрузкой файлов в angular6 отображаются ошибки title1 и title2 not found - PullRequest
Новая
       31

При отправке данных формы вместе с загрузкой файлов в angular6 отображаются ошибки title1 и title2 not found

0 голосов
/ 21 октября 2018

Этот код использует ng2-file-upload in angular 6 для загрузки файла, и он работает нормально.Теперь я хочу отправить данные формы вместе с файлом. Для этого я добавил два ввода формы title1 и title2 , и вот как я выполняю загрузку файла.Это была строка кода, где я ее реализовывал.поэтому я изменяю код ниже 

public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'photo' });

на 

public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo', 
 additionalParameter: {
        t1: title1, t2: title2 });

, но у меня возникла ошибка: src / app / app.component.ts не может найти title1 и title2 длядва ввода формы ..

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:3000/api/upload';

import { AppData } from './AppData';

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

export class AppComponent implements OnInit {
    title = 'app';

    public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'photo' });

/*
public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo', 
 additionalParameter: {
        t1: title1, t2: title2
  */


 data = new AppData('', '');    

    ngOnInit() {
        this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
        this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
            console.log('ImageUpload:uploaded:', item, status, response);
            alert('File uploaded successfully');
        };
    }
}

AppData.ts 

export class AppData {
  constructor(
      title1: String,
      title2: String
  ) {}
}

app.component.html 

    <input type="file" name="photo" ng2FileSelect [uploader]="uploader" />

    <input type="text" class="form-control" id="title1" 
      required
      [(ngModel)]="data.title1"/>

    <p>Hello {{data.title1}}!</p>        

    <input type="text" class="form-control" id="title2" 
      required
      [(ngModel)]="data.title2"/>

    <p>Hello {{data.title2}}!</p>

<button type="button" class="btn btn-success btn-s" 
 (click)="uploader.uploadAll()"
  [disabled]="!uploader.getNotUploadedItems().length" >
      Upload an Image
</button>

1 Ответ

0 голосов
/ 21 октября 2018

Issue

Вы пытаетесь получить доступ к переменным title1 и title2, которые не определены.

Fix

У вас есть экземпляр AppData.Вы можете использовать это непосредственно вместо этого. 

data = new AppData('', '');

. 

public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo', 
additionalParameter: this.data

Примечание: не забудьте установить title1 и title2 в data объекте.

...