Блог

Главная - Вопросы по программированию - Я пытаюсь передать массив в качестве аргументов в вызов httpservice, но аргументы оцениваются как пустой массив

Я пытаюсь передать массив в качестве аргументов в вызов httpservice, но аргументы оцениваются как пустой массив

#javascript #angular #typescript #rxjs-observables #devextreme-angular

#javascript #угловой #typescript #rxjs-наблюдаемые #devextreme-angular

Вопрос:

Я пытаюсь загрузить несколько изображений, следовательно, преобразую изображение в строку в кодировке base64, а также сохраняю его метаданные в виде массива.Мы сохраняем ссылку на путь к изображению в базу данных, поэтому функциональность записывается в серверную часть для вставки.

Однако ,

  1. Для обработки файлов изображений в base64 и хранения метаданных я использую array и пытаюсь передать в качестве аргументов функции, но я получаю пустой массив при вызове службы. Может кто-нибудь помочь мне понять, почему и как это исправить.
  2. загружаемое изображение вызывается для каждой итерации цикла for , ПОЧЕМУ?

Заранее спасибо .

 export class ItemsDetailsComponent {
  //image variables
  itemImageDetails: any = [];
  ItemImageURLs: any = [];
  itemImageCount: number = 0;
  base64image: any = [];
  CustImageData: any;
  itemImageData: any;
  itemimagePath: any;
  fileList: any = [];
  newImageMetaData: any = [];
  imageMetaData: any = [];
  addImagePopupVisible: boolean = false;
  deleteImagePopupVisible: boolean = false;
  tempImageCount: number = 0;
  deleteImageURL: any;
  deleteImageName: any;
  deleteImageConfirmPopUp: boolean;
  value: any[] = [];


  constructor() {
    // ...
  }

  processFile() {
    let count = 0;

    for (let i = 0; i < this.value.length;
      (i  , count  )) {
      this.fileList.push(this.value[count]);
      this.httpDataService.getBase64(this.value[count])
        .then(base64img => {
          this.base64image[this.tempImageCount] = base64img;
          this.base64image[this.tempImageCount] = this.base64image[this.tempImageCount].split(",")[1];
          this.tempImageCount  ;

          this.newImageMetaData.push({
            "type": this.fileList[i].type,
            "name": this.fileList[i].name,
            "size": this.fileList[i].size
          });

        });
    }
//want to call this function only after for loop is complete but is getting called at every iteration , WHY?
    this.uploadImages(); 
  }
  


uploadImages() {
  if (this.newImageMetaData.length == this.base64image.length) {
    //recieves expected output(the array in log) **

    console.log(this.newImageMetaData);
    console.log(this.base64image); **

     // below service call is receiving empty array - >> [] for ** [...this.base64image] ** ** [...this.newImageMetaData] **

    this.httpDataService.uploadMultipleImages(["", this.itemCode, [...this.base64image],
        [...this.newImageMetaData]
      ])
      .subscribe(status => {
        if ((status != -1) amp;amp; status) {
          this.toastr.success(status   "Image(s) Successfully Uploaded");
          this.getImag();
          this.getItemImageDetails();
          this.newImageMetaData = [];
          this.base64image = [];
        } else {
          this.toastr.error("Error Uploading image"   status   " Image(s) Uploaded ");
        }

        this.addImagePopupVisible = false;
      });
  }

}

//   
 <div class="widget-container">
  <form enctype="multipart/form-data">
    <dx-file-uploader #fileUploader [multiple]="true" accept="image/*" [(value)]="value" uploadMode="useForm"></dx-file-uploader>
    <div class="content">
      <div *ngIf="value.length > 0">
        <h4>Selected Files</h4>
      </div>
      <div *ngFor="let file of value">
        <div class="selected-item">
          Name:
          <span>{{file.name}}</span><br /> Size:
          <span>{{file.size}}</span>bytes<br /> Type:
          <span>{{file.type}}</span><br /> Last Modified Date:
          <span>{{file.lastModifiedDate}}</span>
        </div>
      </div>
    </div>
    <dx-button text="Create Product" type="submit" (onClick)="uploadImages()">
    </dx-button>
  </form>

</div>
<div class="options">
  <div class="caption">Options</div>
  <div class="option">
    <dx-check-box text="Allow multiple files selection" [(value)]="fileUploader.multiple"></dx-check-box>
  </div>
</div>

Комментарии:

1. Похоже, что ваш вызов this.uploadImages(); находится вне processFile() функции.

2. Вы больше не должны использовать LastModifiedDate

Ответ №1:

  • Предполагая, что dx-button является призывом к действию, попробуйте удалить action=»uploadImages()» из тега формы, в конце концов, он будет вызван, как только processFile() завершит итерацию.

  • Если вы сохраните действие, а также кнопку отправки внутри формы, нажатие кнопки будет выполнено.

или

  • Удалите onClick из button и замените uploadImages() на processFile() в теге формы.

Комментарии:

1. Я удалил действие в форме, и при нажатии кнопки cick я добавил вызов в process file, но это не помогло добиться успешной вставки изображения, основная проблема заключается в том, что массив, переданный в качестве аргумента, имеет длину 0 для переменных массива base64image и newmetadata.