如何通过表单在angular2中上传文件？

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

2016-12-12 Md. Sahidul Islam

你是什么意思，“我不能”，错误？你看了演示（http://valor-software.com/ng2-file-upload/）吗？ – Akkusativobjekt

我想单击表单提交按钮，并希望提交所有数据与图像/文件到后端。我怎样才能做到这一点？ @Akkusativobjekt –

只需将上传的文件传递到可以在提交中调用的方法中即可。

在HTML

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

在你TS

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

注： - 向beckend当你需要使它FORMDATA喜欢这个

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

来源

2016-12-12 14:51:53

其实你只需要一个带有ng2FileSelect指令的输入字段和一个绑定到上传器的例如[uploader] =“uploader”。一个额外的按钮，调用ulpoad（）方法，你就完成了。没有必要创建一个FormData对象AFAIK。 – Akkusativobjekt

我想通过点击表单提交按钮来提交其他领域的数据。 –

是的，你应该可以做到这一点，只要将数据传递给方法！ –

因此，最后我明白你的问题，这似乎是你想与文件发送的附加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 post的有效内容中的其他发布数据，例如使用Firefox开发人员工具。他们应该是这样的：

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

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

value2

（你的边界不会是相同的）

我发现solution对项目的GitHub的跟踪器。

来源

2016-12-14 14:56:13 Akkusativobjekt

如何通过表单在angular2中上传文件？

回答

相关问题