如何从Angular向Nodejs Multer发送multipart/form-data？

Question

我想从Angular将图像以Blob数据的形式上传到nodeJS服务器。服务器在后端使用multer。图像文件是由canvas渲染生成的。我从服务器得到以下错误：

错误：多部分：未找到边界 status:500

以下是我的代码。请帮助我找出问题所在。

Angular：

// blob:Blob;   ->  it has valid image data.
var formData: FormData = new FormData();
formData.append('banner', blob, "my-file.png")

this.http.post(url,
    formData, { headers: new Headers({ 'Content-Type': 'multipart/form-data' }) })
    .toPromise()
    .then(res => {
      console.log(res);
      return res.json();
    })
    .catch(this.handleError);

nodejs:

router.post('/upload-banner-image', bannerImageUpload.single('banner'), watchfaceController.uploadWatchfaceBannerImage);

- PARAMANANDA PRADHAN

Answer 1

移除你的 'Content-Type': 'multipart/form-data' 头部，就可以正常工作。

我也遇到了同样的错误，这是由于缺少 boundary=..，应该像下面这个有效的请求一样在 multipart/form-data 之后添加：

当你移除头部时，浏览器会自动添加 boundary=.. 并使其正常工作。

- bertrandg

---

这个能在任何现代浏览器上运行吗？还是这是 Angular 的 httpClient 的一部分？ - Takatalvi

Angular会自动发送contentType: multipart/form-data吗？ - divine

是的，它有效，它是自动获取的。 - Zaki Mohammed

Answer 2

在头部添加"Content-Type:file"，然后它就可以工作了。

- Kamalakar