Как исправить, что FormData.entries () не работает

Question

У меня есть <input type="file">, который я пытаюсь загрузить на удаленный сервер. Я видел видео, где это достигается путем добавления выбранного объекта файла к объекту FormData и отправки с использованием http.

Проблема в том, что мой FormData объект пуст. Я видел в Интернете, что для проверки FormData нужно пройти через FormData.entries(), но я получаю ошибку entries is not a known property of "FormData". Я видел онлайн исправление, включающее добавление:

declare global {
    interface FormData {
      entries(): Iterator<[USVString, USVString | Blob]>;
    }
  }

в мой polyfills.ts файл, а затем объявив USVString в @ types / usvstring.d.ts с type USVString = string; и добавив types = ["../@types/usvstring"] в tsconfig.app.json. Я сделал все это, но я все еще получаю ошибку компиляции:

ERROR in src/app/selection/selection.component.ts(38,25): error TS2495: Type 'Iterator<[string, string | Blob]>' is not an array type or a string type.

У кого-нибудь есть здесь идеи как исправить?

Мой исходный код здесь:

<h1>UPLOAD PHOTO</h1>
<input type="file" (change)="onSelectFile($event)">
<button (click)="uploadFiles()">Upload</button>

  onSelectFile(event) {
     this.selectedFile = <File>event.target.files[0];
  }

  uploadFiles() {
    let fd = new FormData();

    fd.append('image',this.selectedFile,this.selectedFile.name);

    for (const entry of fd.entries()) {  // <-- ENTRIES() NOT RECOGNIZED
      console.log(entry);
    }

    this.http.post("localhost:3000/test-photo",fd)
      .subscribe((res) => {
        console.log(res);
      });
  }

Answer 1

Как упомянуто в моих комментариях, я поделюсь им своим обходным путем для итерации через FormData.

Согласно документации для FormData.entries(), похоже, что она действительно не поддерживается старыми версиями Firefox, поскольку поддерживается только версиями 44 и выше. Кроме того, он не поддерживается Internet Explorer (IE), как и все, что до Safari 11.

Итак, я создал словарь, а затем вручную сопоставил его с вашими данными FormData. Следовательно, если вам нужно выполнить итерацию для каких-либо целей (например, отладки или чего-либо еще), вы выполняете итерацию по словарю, а не по самой форме FormData.

const formDataDictionary = {
  'image': this.selectedFile,
  'image2': this.selectedFile2
};

const fd = new FormData();
for (const key in formDataDictionary) {
  fd.append(key, formDataDictionary[key]);
}

В качестве альтернативы, вы можете использовать синтаксис расширения ES6 для итерации по FormData, что должно работать нормально, если Angular выполнит за вас всю необходимую работу.

const fd = new FormData();
fd.append('image',this.selectedFile,this.selectedFile.name);
console.log(...fd);