Загрузка нескольких файлов Angular + Laravel - PullRequest
Новая
       8

Загрузка нескольких файлов Angular + Laravel

2 голосов
/ 21 апреля 2020

Я работаю с Angular. Я должен загрузить несколько изображений через API (сделано / написано в Laravel). Следующее тело принимается API 

portfolio_id: 2
portfolio_image: [ {file1}, {file2} ] //Accepts in this format. File Objects in an array

Мой angular код:

HTML

 <div class="col-lg-12">
  <label class="file-upload-label">Upload Profile Picture</label>
  <input multiple (change)="fileSelected($event)" type="file" id="file" name="profile_pic"/>
  <label for="file" class="btn-2">Upload</label>
 </div>

Component.ts 

  selectedFile;

  fileSelected(event) {
    console.log(event);
    this.selectedFile = <File>event.target.files;
    console.log("Selected Files are:",this.selectedFile)
  }

При отправке кнопки Я запускаю следующую функцию из файла component.ts: 

  portfolioImage(){

  const formData =  new  FormData();
  formData.append("portfolio_id",  this.portfolioId);
  formData.append("portfolio_image", this.selectedFile)
  this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res =>  {
      console.log(res);
      alert('Files uploaded Successfully!');
  })
}

Вывод на консоль: При событии изменения выбора файла в консоли отображается следующее. log 

FileList [ File, File ]

При расширении массива я вижу следующее: 

 FileList(2)
    0: File { name: "1.jpg", lastModified: 1578490559152, size: 317383, … }
    1: File { name: "2.jpg", lastModified: 1578490599778, size: 288174, … }
    length: 2

Проблема: При отправке я ничего не вижу в параметрах на вкладке сети, хотя Я получаю сообщение об успешной загрузке изображений.

Вещи, которые я пробовал Я пытался загрузить через l oop и изменил функцию fileSelected(event) на: 

 myFiles:string [] = [];
  fileSelected(event) {
    for (var i = 0; i < event.target.files.length; i++) { 
        this.myFiles.push(event.target.files[i]);
    }
}

и загрузить функцию по адресу: 

portfolioImage(){
  console.log("myfile",this.myFiles);
  const formData =  new  FormData();
  formData.append("portfolio_id",  this.portfolioId);
  for(var i =  0; i <  this.myFiles.length; i++)  {  
      formData.append("portfolio_image",  this.myFiles[i]);
  } 
  this.httpClient.post(this.URL, formData, httpOptionsMulti).subscribe(res =>  {
      console.log(res);
      alert('Files uploaded Successfully!');
  })
}

Но все равно не повезло.

Сводка: Как загрузить несколько файлов, используя angular во внешнем интерфейсе и laravel api во внутреннем интерфейсе. API laravel принимает файлы как объекты в массиве: [{file}, {file}]. Любая помощь будет высоко оценена. Спасибо.

...