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的解决方法。

根据$("#accept-answer").click(function () { var id = $(this).attr('data-answer'); $.ajax({ url: {!! route('accept.answer',['id' => $answer->id]) !!}, type: 'POST', dataType: 'json', headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}, success: function (result) { alert('Success'); }, error: function (error) { alert('Error'); } }); });的{{3}}，似乎旧版本的Firefox确实不支持它，因为它仅受版本44和更高版本的支持。同样，Internet Explorer（IE）以及Safari 11之前的任何版本均不支持它。

因此，我要做的是创建一个字典，然后将其手动映射到您的FormData。因此，如果出于任何目的（例如调试或其他目的）需要对其进行迭代，则可以遍历字典而不是FormData本身。

FormData.entries()

或者，您可以使用ES6的扩展语法来遍历FormData，如果Angular会为您完成转译工作，则该方法可以正常工作。

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

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

如何修复FormData.entries（）无法正常工作

1 个答案: