如何通過表單在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中上傳文件？

回答

相關問題