Загрузить файл с помощью компонента загрузки Primeng - PullRequest
Новая
       8

Загрузить файл с помощью компонента загрузки Primeng

0 голосов
/ 12 сентября 2018

Я бы загрузил файл в формате Angular, используя компонент загрузки

Вот мой HTML: 

<p-fileUpload mode="basic" name="demo[]" customUpload="true" accept="image/*" maxFileSize="1000000"  (uploadHandler)="upload($event)"></p-fileUpload>

в моем тс я печатаю значение параметра 

upload(event) {
  console.log(event)
}

Я получаю только метаданные, а не содержимое BLOB-объекта 

{"files":[{"objectURL":{"changingThisBreaksApplicationSecurity":"blob:https://prime-ng-file-uploading.stackblitz.io/d429e761-c391-45fa-8628-39b603e25225"}}]}

Я бы также получил содержимое файла для отправки через API на сервер

Вот демонстрация стекаблиц

1 Ответ

0 голосов
/ 12 сентября 2018

В официальной документации у вас есть пример: 

export class FileUploadDemo {
  uploadedFiles: any[] = [];
  constructor(private messageService: MessageService) {}
  onUpload(event) {
    for (let file of event.files) {
      this.uploadedFiles.push(file);
    }
    this.messageService.add({
      severity: 'info',
      summary: 'File Uploaded',
      detail: ''
    });
  }
}

Когда я использовал primeNG, я делал это так (для загрузки только 1 файла):

HTML 

 <p-fileUpload name="myfile[]" customUpload="true" multiple="multiple" (uploadHandler)="onUpload($event)" accept="application/pdf"></p-fileUpload>

component.ts 

export class AlteracionFormComponent {
  uplo: File;
  constructor(private fileService: FileUploadClientService) {}
  onUpload(event) {
    for (let file of event.files) {
      this.uplo = file;
    }
    this.uploadFileToActivity();
  }
  uploadFileToActivity() {
    this.fileService.postFile(this.uplo).subscribe(data => {
      alert('Success');
    }, error => {
      console.log(error);
    });
  }
}

И мой сервис (в Angular)

Сервис.ts 

  postFile(id_alteracion: string, filesToUpload: FileUploadModel[], catalogacion: any): Observable<any> {
    let url = urlAPIAlteraciones + '/';
    url += id_alteracion + '/documentos';

    const formData: FormData = new FormData();

    formData.append('json', JSON.stringify(catalogacion));

    for (let file of filesToUpload) {
      formData.append('documento', file.data, file.data.name);
    }

    console.log(formData);

    let headers = new HttpHeaders();

    return this._http.post(url, formData, { headers: headers });
  }

Надеюсь, что поможет

...