Question

如何通过angular2中的表单提交上传文件。我想使用 ng2-file-upload 库。但我无法在表单提交中使用它。有人可以帮帮我吗？

Answer 1

应该可以通过在您的方法中传递上传的文件来实现，该文件可以在提交中调用。

在您的HTML中

<form #sieFileUploadForm="ngForm">
  <input type="file" id="fileItem" 
  value="Browse...">

在你身上

uploadFile(file){
 console.log(file)
}

注意： - 发送到beckend时，你需要像这样使用formdata

uploadFile(file){
 let formData = new FormData();
 formData.append('FILENAME', file);
}

Answer 2

所以最后我理解你的问题，看起来是你想要随文件一起发送的附加formdata。创建FileUploader后，您可以使用以下代码添加其他表单：

uploader: FileUploader = new FileUploader({ url: "http://localhost/upload.php" });

  constructor() {
  this.uploader.onBuildItemForm = (item, form) => {
      form.append("key1", "value1");
      form.append("key1", "value2");
    };
}

有人说将此代码放在ngOnInit()中有点漂亮，但我不想让这段代码膨胀，这个决定在这里不是很重要。

之后，您可以检查http帖子的有效负载中的其他帖子数据，例如使用Firefox Developer Tools。他们应该看起来像：

-----------------------------110224700718602891206418821
Content-Disposition: form-data; name="key1"

value1
-----------------------------110224700718602891206418821
Content-Disposition: form-data; name="key1"

value2

（你的边界不一样）

我在项目的GitHub跟踪器上找到了solution。

如何通过angular2中的表单提交上传文件？

2 个答案: