时间戳

首页 > 解决方案 > 当前请求不是 Angular 11 中的多部分请求

javascript - 当前请求不是 Angular 11 中的多部分请求

问题描述

我正在尝试以角度上传图像。

我做这一步：

在服务中，我使用以下设置：

  postFormDataToServerMultiPart(action: string, formData) {
    var headerss = new HttpHeaders({
      "Content-Type": "multipart/form-data"
    });

    return this.http
      .post(HttpService.apiUrl + action, formData, { headers: headerss })
      .pipe(map((response: any) => response));
  }

标题包含："Content-Type": "multipart/form-data"

在 component.ts 中：

   var formData = new FormData();
          formData.append("file", this.imageForm.get("profile").value);

          if (this.Image) {
            this.httpService
              .postFormDataToServerMultiPart(
                "api/upload/driver_image?id=" + this.employeeId,
                formData
              )
              .subscribe((resp) => {
                console.log("edit", resp);
                if (resp.status == "SUCCESS") {
                  var dialogRef = this.dialog.open(DisplayPopupComponent, {
                    data: {
                      title: "Driver Updated Successfully!",
                    },

    ............

我收到此错误：

error: "Internal Server Error"
message: "Current request is not a multipart request"
path: "/api/upload/driver_image"
status: 500
timestamp: "2021-07-09T13:45:23.443+0000"

我做错了什么？

错过什么？

标签： javascriptangularmultipartform-data

解决方案

这是失败的，因为您是手动设置Content-Type标题而不是让浏览器为您执行此操作。如果您使用您的代码原样发送该请求，请进入开发工具并检查请求标头。你会看到的：

Content-Type: multipart/form-data

这实际上并不完整，因为您缺少边界。只需删除手动标题即可解决此问题，因为浏览器将正确设置Content-Type并添加边界。

  postFormDataToServerMultiPart(action: string, formData) {
    return this.http
      .post(HttpService.apiUrl + action, formData)
      .pipe(map((response: any) => response));
  }

发送此请求后，再次检查开发工具的请求标头，您将看到如下内容：

Content-Type: multipart/form-data; boundary=----12345678901234567890

有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#directives

推荐阅读