如何将Angular的multipart/form-data发布到Nodejs Multer? [英] How to post multipart/form-data from Angular to Nodejs Multer?

问题描述

我想从Angular将图像作为Blob数据上传到nodeJS服务器.服务器在后端使用 multer .图像文件是由canvas渲染生成的.我从服务器收到以下错误:

From Angular I want to upload a image as Blob data to nodeJS server. The server uses multer in the backend. The image file is generated by canvas render. I am getting the following error from the server:

错误:多部分:未找到边界状态:500

Error: Multipart: Boundary not found status:500

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

The following is my code. Please help me to find out the issue.

角度:

// 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);

推荐答案

删除您的'Content-Type': 'multipart/form-data'标头，它应该可以工作.

Remove your 'Content-Type': 'multipart/form-data' header and it should work.

我遇到了同样的错误，这是由于multipart/form-data之后缺少了boundary=..所致，例如以下工作请求:

I got the same error, this is due to the missing boundary=.. just after multipart/form-data like the following working request:

当您删除标题时，浏览器会自动将其与boundary=..一起添加，并且可以使用.

When you remove your header, browsers will add it automatically with the boundary=.. and it works.

这篇关于如何将Angular的multipart/form-data发布到Nodejs Multer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！