角8向Java后端发送多部分/格式数据

Question

我试图创建一个服务，用户将能够填写一个表单(所有字符串数据)并上传一个文件。对于前端，我们使用角8，对于后端，我们使用Java。我们使用JBOSS来设置它，但我不知道这在这里是否有区别。当我们试图提交时，我们得到了一些我们无法修复的错误。在做了许多试验和错误测试之后，我们不知道该做什么。

• 前向法

​

• 方法调用independentBusiness。

​

• 前端文件

​

​

• 后端端点

​

当我们将内容类型保留为未定义( post方法中没有指定选项)时，我们得到："415个不受支持的媒体类型的内容类型应用程序/八进制流不支持“。

​

如果我们通过选项将内容类型专门设置为未定义的，则表示无法读取未定义的属性“长度”。

当我们将内容类型设置为multipart/form-data时，我们得到：“解析多部分servlet请求失败；嵌套的例外是org.apache.tomcat.util.http.fileupload.FileUploadException：：java.io.IOException:由于没有找到多部分边界，请求被拒绝了”，我们也尝试用它设置一个边界，但它似乎不起作用。

正在使用的方法

和错误

如有任何建议，将不胜感激。如果你需要其他信息，请告诉我，我会提供的。

谢谢!

Answer 1

作为对多部件问题的解决方案，我们最终将JSON中的文件附加到fileName、mimeType和contentBase64Encoded中，并将其作为一个字符串发送。我们无法使多部分工作，这是我们的解决办法。在别人遇到同样的问题的情况下，发布这篇文章。

Answer 2

我无法从您提供的图像中看到您在代码中使用HttpHeaders。

在请求中包含HttpOptions对象，如下所示：

var requestHeaders = new HttpHeaders();
requestHeaders.append('<key>', '<media type>');

const httpOptions = {
  headers: requestHeaders
};

this.http.post<any>(url, body, httpOptions).subscribe()

Post请求角文件

Answer 3

我们使用的是带有Spring端点的角11，这要归功于[@Hardik]

我们有与上面列出的完全相同的问题，并且正在使用内置在角HTTP客户端中

钥匙就在这里

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

它在下面半完整的代码中工作：

submit() {
    const formData = new FormData();

//append the document to the form data however could also grab it from outside the form value if using validators

    formData.append('file', this.myForm.get('fileSource').value);

    var json = {
        "customer": {
            "contact": {
                "firstName": "Cecilia",
                "lastName": "Chapman",
                "emailAddress": "foo@bar.com",
                "phoneNumber": "1111111111",
                "extension": "123",
                "phoneType": "HOME",
                "email": true
            },
            "address": {
                "addressLine1": "711 2880 Nulla St",
                "addressLine2": "Mankato Mississippi 96522",
                "city": "NoWhere",
                "state": "PA",
                "zipcode": "15001",
                "country": "USA"
            },
            "organization": "Foundation"
        },
        "details": {
            "eventDate": "2021-08-28T23:13:00",
            "usedFor":"Education",
            "comments":"Thank you!"
        }
    };
    
    formData.append("request", new Blob([JSON.stringify(json)], {
        type: "application/json"
    }));

    this.http.post('http://localhost:8080/forms/request', formData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }