formData 通過 angular + nodejs 中的 http.post

Question

當我想通過 http.post 從我的 angular 客戶端向我的 node.js 服務器傳遞一些數據時，我遇到了一個問題。

事情就是這樣，用 JSON.stringify(my text) 傳遞文本工作正常，但考慮到我想傳遞一個文件 + 我的文本，我想使用 formData。

當我嘗試取回服務器端的數據時，我的 req.body 是空的，我無法檢索數據。

這是我的客戶端代碼：

[...]
var formData = new FormData();
        formData.append('name', product.name);
        formData.append('benefits_detail', product.benefits_detail);
        formData.append('sections', product.sections);
        formData.append('image', product.image);   // image is my file

            return this.http.post('http://localhost:3000/product', formData, {headers: headers}).map(........)

然后我的服務器，我嘗試取回我的數據：

router.post('/', function (req, res, next) {

    console.log('req.body');
    console.log(req.body);
    console.log(req.body.formData);

...

這里的 console.log 是空的，就像顯示：{}

任何人都可以幫助解決這個問題？

謝謝你

Answer 1

看起來您沒有使用任何正文解析中間件，這是必需的。

來自req.body的Express 文檔

包含請求正文中提交的數據的鍵值對。 默認情況下，它是未定義的，並在您使用 body-parser 和 multer 等正文解析中間件時填充。

嘗試使用body-parser

Answer 2

要將圖像上傳到服務器，您可以嘗試使用Ng 文件上傳指令。 它有一個指令來選擇 HTML 中的文件，然后將文件上傳到服務器。 如果您已經在選擇圖像，我相信您可以使用 JS 中的上傳部分來發送圖像（從未嘗試在 HTML 中使用沒有文件選擇器的上傳，但它應該可以工作）。

但是，此解決方案需要您發送兩個請求，一個用於數據，另一個用於圖像。