Как загрузить несколько файлов в угловых и текстовых с помощью таблицы HTML? - PullRequest
Новая
       18

Как загрузить несколько файлов в угловых и текстовых с помощью таблицы HTML?

0 голосов
/ 12 мая 2019

У меня одна html-форма из одного выпадающего списка компаний. Если пользователь выберет любую компанию из выпадающего списка Соответствующие сотрудники конкретной компании в таблице. С каждой строкой я Я прилагаю ввод [файл]. Теперь пользователь будет загружать платежную ведомость каждого сотрудник и сохранить данные. моя задача состоит в том, чтобы загружать файлы каждой строки в базы данных в другую строку.

component.html: 

<table *ngIf="allemp">
  <tr>
      <th>ID</th>
      <th>Name of Employee</th>
      <th>Attached Payslip</th>
  </tr>
  <tr *ngFor="let data1 of allemp">
      <td>{{data1.id}}</td>
      <td>{{data1.emp_name}}</td>
        <input formArrayName='payslip' type="file" (change)="onFileChangeInfo($event,i)" multiple></td>
  </tr>
</table>

функция для нескольких загрузок в файле TS: 

  onFileChangeInfo(event,index) {
      const reader = new FileReader();
      var filesAmount = event.target.files.length;
      this.items= this.myForm1.controls['payslip'] as FormArray;
      console.log(this.items);
        if(event.target.files && event.target.files.length > 0) {
          const [files] = event.target.files;
          this.regInfoName=event.target.files[0].name;
          this.urlInfoUploadd= event.target.result;

          for (let i = 0; i < filesAmount; i++) {
          reader.readAsDataURL(event.target.files[i]);
          reader.onload = () => {
            this.urlInfoUpload = this.urlInfoUploadd;
            this.regInfoNameHtml=this.regInfoName;
            this.items.controls[index].patchValue({
              'data_blob': reader.result,
              'data_file':files.name,

          });
            console.log(files.name);
            this.cd.markForCheck();
          };
        }

      }
  }

в console.log (filesAmount) показывает все выбранные файлы. Но в базе данных идет только последний файл.

Я не понимаю, что не так в моем коде. пожалуйста, помогите мне с тем же.

1 Ответ

0 голосов
/ 12 мая 2019

У меня был подобный опыт в ReactJS раньше. Поэтому я сделаю все возможное, чтобы переписать код, который я использовал для вас.

Вы можете использовать Promise.all () для асинхронной загрузки массива файлов: 

onFileChangeInfo(event) {
   const files = Array.from(event.target.files); // Get files in array form

   // Map each file to a promise that resolves an array of files
   const promises = files.map(file => {
      return (new Promise(resolve, reject) => {
         const reader = new FileReader();
         reader.addEventListener('load', (ev) => {
            resolve(ev.target.result);
         }
         reader.addEventListener('error', reject);
         reader.readAsDataURL(file);
      }
   });

   // Once all promises are resolved, store the file blob in your variable
   Promise.all(promises).then(files => {
      this.items.controls.patchValue({ 
         'data_blob': files 
      }, 
   }, error => { console.error(error); });
}

Я не знаю, как выглядит ваш код, поэтому я не знаю, для чего вы используете параметр "index". Но если this.items.controls - это массив, в котором вы хотите хранить каждый файловый блоб, то вам не нужен «индекс».

...