如何将多部分/表单数据从 Angular 发布到 Nodejs Multer？

Question

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

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

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

角度：

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

Answer 1

删除您的

'Content-Type': 'multipart/form-data'

标头，它应该可以工作。

我遇到了同样的错误，这是由于在

boundary=..

之后缺少

multipart/form-data

，如以下工作请求：

当您删除标题时，浏览器会自动使用

boundary=..

添加它，并且它可以工作。

Answer 2

在标题中添加 Content-Type': 'file' ，它应该可以工作

Answer 3

当你在 Angular 中使用拦截器时，你可以使用这个代码片段

intercept(request: HttpRequest<any>, next: HttpHandler) {
    let authReq;
    if (request.method === 'POST' && request.body instanceof FormData) {
      authReq = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.auth.getToken()}`,
        },
      });
    } else {
      authReq = request.clone({
        setHeaders: {
          'Content-Type': 'application/json; charset=utf-8',
          Accept: 'application/json',
          Authorization: `Bearer ${this.auth.getToken()}`,
        },
      });
    }
    return next.handle(authReq).pipe(catchError((err) => this.handleAuthError(err)));
  }