如何使用AngularJS的$http发送multipart/form-data？

Question

我正在开发一个使用不同REST服务（用Java编写）的图形化界面。我需要调用像这样的服务：

@PUT
@Path("nomeServizio")
public Response nomeServizio(final FormDataMultiPart multiPart) {
......}

调用服务：

service: function (data) {

            return $http({
                url: PATH_REST_SERVICES + '/nomeServizio',
                headers: {"Content-Type": "multipart/form-data"},
                data: data,
                method: "PUT"
            });
        }

当我从我的Angularjs服务文件中请求时，如果服务有Content-Type = multipart / form-data，则会收到错误400（错误请求）。

而如果服务具有Content-Type =“application / x-www-form-urlencoded; charset = utf-8”或“application / json; charset = utf-8”或“application / form-data”，则会收到415（不支持的媒体类型）错误。

我正在使用javascript和html5开发前端，我在网上没有找到任何可以帮助我的东西，因为在javascript中不存在FormDataMultiPart对象。

我尝试以多种方式格式化要发送的数据，但它总是返回400或415。 我应该如何格式化要发送到REST调用的数据？ 头文件中的Content-Type应该是什么？请注意保留HTML标记。

- Andrea Pascali

Answer 1

如何使用AngularJS $http发送FormData

FormData接口提供了一种简便的方式来构造一组键值对，表示表单字段及其值，然后可以使用XHR Send方法轻松地发送这些数据。它使用与表单相同的格式，如果编码类型设置为multipart/form-data。

var formData = new FormData();

formData.append('type', type);
formData.append('description', description);
formData.append('photo', photo); 

return $http({
    url: PATH_REST_SERVICES + '/nomeServizio',
    headers: {"Content-Type": undefined },
    data: formData,
    method: "PUT"
});

重要的是将内容类型标头设置为 undefined。通常，$http 服务 会将内容类型设置为 application/json。当内容类型为 undefined 时，XHR API 将自动将内容类型设置为带有正确 多部分边界 的 multipart/form-data。

- georgeawg

Answer 2

在Java代码中，您需要编写如下代码：

@POST
@Path("/upload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFile(
    @FormDataParam("file") InputStream uploadedInputStream,
    @FormDataParam("file") FormDataContentDisposition fileDetail) {

更多信息，请参考下面的示例和链接：

https://www.mkyong.com/webservices/jax-rs/file-upload-example-in-jersey/

- Anshul Sharma

---

问题在于我无法更改我使用的REST服务。我应该找到一个解决方案，允许我使用JavaScript或PHP格式化FormDataMultiPart中的数据。 - Andrea Pascali