简体   繁体   English

无法 POST 请求多部分/表单数据角度

[英]Cannot POST request multipart/form-data angular

I am trying to post formData through angular code.我正在尝试通过角度代码发布 formData。 I am using httpInterceptor for adding request headers.我正在使用 httpInterceptor 添加请求标头。

Here goes my code:这是我的代码:

httpInterceptor --- http拦截器---

if (request.url.includes(srConstants.baseEmailNotification + srConstants.apiUrls.sendEmail)) {

        let interactionIdForAm: any = JSON.parse(sessionStorage.getItem('interactionId'));
        interactionIdForAm = interactionIdForAm ? interactionIdForAm.toString() : '';
        request = request.clone({
          headers: new HttpHeaders({
            'Request-Date': currentDate.toString(),
            'Request-Id': requestId,
            Opco: srConstants['opco'],
            Lang: srConstants['language'],
            'Content-Type': 'multipart/form-data',
            Authorization: token ? 'Bearer ' + token['accessToken'] : undefined,
            'x-app-name': environment.csPortalConfig.xAppName,
            'x-app-type': environment.csPortalConfig.xAppType,
            'x-app-version': environment.csPortalConfig.xAppVersion,
            'x-channel': environment.csPortalConfig.xChannel,
            'x-client-id': environment.csPortalConfig.xClientId,
            'x-api-key': environment.csPortalConfig.xApiKey,
            'x-service-id': environment.csPortalConfig.xServiceId,
            'sr-client-id': this.getSRClientId(request),
            "Accept": "application/json" ,
            param1: environment.encriptionEnabled
              ? requestData['param1']
              : 'null',
            Interaction: interactionIdForAm,
            locale: 'en',
          }),
          body: environment.encriptionEnabled
            ? requestData.ciphertext
            : request.body
        });
      }

Using postman I am able to post correctly.使用邮递员我能够正确发布。 But through code it gives error.但是通过代码它给出了错误。

在此处输入图像描述

在此处输入图像描述

Looks like I am doing something wrong.看起来我做错了什么。 Any help will be highly appreciated.任何帮助将不胜感激。

Thanks谢谢

在此处输入图像描述

controller method ---控制器方法---

@PostMapping(value = RequestURIConstant.SEND_EMAIL_WITH_ATTACHMENT, consumes = { MediaType.APPLICATION_JSON_VALUE, MediaType.MULTIPART_FORM_DATA_VALUE })
public void sendEmailWithAttachment(@RequestPart("request") String request, @RequestPart("file") MultipartFile file) {
  EmailNotificationRequest emailRequest = externalNotification.getJson(request);
  LOG.info("Request received to send email");
  externalNotification.sendMail(emailRequest, file);
}

Error logged on server ---错误登录服务器---

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found org.apache.tomcat.util.http.fileupload.FileUploadException:请求被拒绝,因为没有找到多部分边界

If I remove Content-Type as suggested on some posts then I get unsupported media type error如果我按照某些帖子的建议删除 Content-Type,则会收到不受支持的媒体类型错误

After spending nights I was able to fix this.过夜后,我能够解决这个问题。 The main issue was my content-type and the way I was creating formData object.主要问题是我的内容类型和我创建 formData 对象的方式。

Here is my changes which worked:这是我的有效更改:

  1. Firstly I removed the content-type mentioned in my httpInterceptor首先,我删除了我的 httpInterceptor 中提到的内容类型

  2. Since i needed to mention content-type for each part of the multipart request.因为我需要为多部分请求的每个部分提及内容类型。 I constructed using blob as blob gives us priviledge to specify content-type我使用 blob 构建,因为 blob 赋予我们指定内容类型的特权


let formData = new FormData();
formData.append('request', new Blob([JSON.stringify(obj)],{type: "application/json"}));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在Angular2中构建multipart / form-data POST请求并验证输入类型File - Build multipart/form-data POST request in Angular2 and validate Input type File Angular 7 Post 文件内容作为 multipart/form-data - Angular 7 Post file contents as multipart/form-data Angular HttpClient发布两个文件(Multipart / form-data) - Angular HttpClient Post Two Files (Multipart/form-data) 如何将多部分/表单数据从 Angular 发布到 Nodejs Multer? - How to post multipart/form-data from Angular to Nodejs Multer? 多部分/表单数据发布请求在 Angular 7 和 spring 引导时出现 CORS 错误,仅当图像大小超过 1 mb 时 - multipart/form-data post request getting CORS error with Angular 7 and spring boot, only when image size is more than 1 mb 将多部分/表单数据发布到端点 - Post multipart/form-data to endpoint 从角度到弹簧的表格数据发布请求 - post request with form-data from angular to spring 带有“表单数据”类型的请求正文参数的POST不起作用+角度2 - POST with request body params of type 'form-data' not working + angular 2 如何从角度发布多部分/表单数据到Django REST API - How to post multipart/form-data from angular to Django REST API Angular 8,上传(使用post multipart/form-data)FileReader.readAsDataURL的结果 - Angular 8, upload (using post multipart/form-data) the result of FileReader.readAsDataURL
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM