Как преобразовать FormData, который содержит данные нескольких файлов, в формат JSON, используя Angular 6 и Json Server - PullRequest
Новая
       44

Как преобразовать FormData, который содержит данные нескольких файлов, в формат JSON, используя Angular 6 и Json Server

0 голосов
/ 23 сентября 2019

В основном я хочу взять несколько файлов из ввода и опубликовать все сведения о файле в формате JSON, используя Json Server и HttpClient

Html: 

 <input
      style="display: none"
      type="file" multiple (change)="onFileSelected($event)"
      #fileInput>
    <button type="button" (click)="fileInput.click()">Select File</button>
    <button (click)="onUpload()">Upload!</button>

Upload.component.ts--- В этом файле Upload.component.ts я пытаюсь преобразовать все данные моих файлов в formData, а затем пытаюсь отправить их в свой служебный файл, где я пытаюсь получить сведения о formData, а затем опубликовать данные в формате JSON 

export class UploadCompComponent implements OnInit {

  selectedFile: File[];
  onFileSelected(event) {
  this.selectedFile = event.target.files;
  console.log(this.selectedFile);
  }

  onUpload() {
   const fd = new FormData();
   for (let i = 0; i <  this.selectedFile.length; i++) {
     console.log(this.selectedFile[i]);    // I am able to see all my file info in the console
    }

    Array.from(this.selectedFile).forEach(f => fd.append('file', f));

    console.log(fd.getAll('file'));
    this.upload_ser.save(fd).subscribe(
      // (data: FormData) => {
      //   console.log(data);
      // }
      res => {
        console.log(res);
      }
      );
}

Вот мой сервисный файл 

export class UploadServiceService {

  constructor(private http: HttpClient) { }
  url = 'http://localhost:3000';

  save(p_users: FormData):Observable<FormData> {
    console.log(p_users.getAll('file'));
  return this.http.post<FormData>(this.url + '/Uploader', p_users.getAll('file')
  , {
    headers: new HttpHeaders({
      'Content-Type': 'application-type/json'
    })
  }
  ).pipe(catchError(this.handleError));
}
handleError(error) {
  let errorMessage = '';
  if(error.error instanceof ErrorEvent) {
    // Get client-side error
    errorMessage = error.error.message;
  } else {
    // Get server-side error
    errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
  }
  window.alert(errorMessage);
  return throwError(errorMessage);
}
}

Вот детали, которые видны в моем файле Json.Я не могу увидеть имя файла, размер файла и т. Д. Все пусто

Я новичок в Rest API.Может ли кто-нибудь посылать какие-либо материалы для моей проблемы

...