使用 Javascript(或 Angular)在每个部分上使用不同的 Content-Type 组合 multipart/form-data [英] Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)

问题描述

问错问题，请看下面我的更新

我需要将我的 AngularJS 项目与现有的 RESTful API 集成.这些 API 使用 上传文件 的 POST 请求，并在请求中提交表单数据.不幸的是，表单输入之一需要在 Content-Type: Application/json 中.

I need to integrate my AngularJS Project with an existing RESTful API. These API consume POST request which upload a file, and also submit the form data in a request. Unfortunately, one of the form input requires to be in Content-Type: Application/json.

在网上搜索后，我只能用 Content-Type: multipart/form-data POST 其中每个部分都没有特定的 >MIME.如何为 Javascript 中的每个部分使用不同的 MIME 组合我的 multipart/form-data?

After search on the web, I could only POST with Content-Type: multipart/form-data in which each of the parts does not have a specific MIME. How can I compose my multipart/form-data with a different MIME for each parts in Javascript?

POST /api/v1/inventory
Host: localhost:8000
Origin: http://localhost:9000
Content-Type: multipart/form-data; boundary=------border

------border
Content-Disposition: form-data; name="owner"

john doe
------border
Content-Disposition: form-data; name="image"; filename="mybook.png"
Content-Type: image/png


------border
Content-Disposition: form-data; name="items"
Content-Type: application/json

{"name": "Book", "quantity": "12"}
------border--

相关参考资料:

1. https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
2. REST - HTTP Post Multipart with JSON
3. http://code.activestate.com/recipes/578846-composing-a-postable-http-request-with-multipartfo/
4. application/x-www-form-urlencoded 或 multipart/form-data?
5. https://stackoverflow.com/a/9082243/764592

<小时>

更新

为问错问题而道歉.原来的问题是，我可以看到服务器调用类似的逻辑，

---

Update

Apologize for asking a wrong question. The original problem is that, I can see the server calling the logic something like,

func POST(req):
     owner = req.owner // This is string
     image = req.image // This is file object
     itemQuantity = req.items.quantity // Items is an object with attribute quantity
     itemName = req.items.name // Items is an object with attribute name

我还设法弄清楚如何提交这样的帖子请求.我将在下面发布我的答案.

I have also managed to figure out how to submit such a post request. I will post my answer below.

再次抱歉问错了问题.

推荐答案

根据 FormData，您可以使用 Blob 构造函数:

According to the documentation of FormData, you can append a field with a specific content type by using the Blob constructor:

var formData = new FormData();

formData.append('items', new Blob([JSON.stringify({
    name: "Book",
    quantity: "12"
})], {
    type: "application/json"
}));

仔细观察，原来它会发送部分如下:

After careful observation, it turns out that it will send the part as follows:

Content-Disposition: form-data; name="items"; filename="blob"
Content-Type: text/json

避免自己构建整个请求的唯一替代方法是传递一个字符串值:

The only alternative, safe from building the whole request yourself is to pass a string value:

formData.append('items', '{"name": "Book", "quantity": "12"}');

不幸的是，这不会设置 Content-Type 标头.

This, unfortunately, doesn't set the Content-Type header.

这篇关于使用 Javascript(或 Angular)在每个部分上使用不同的 Content-Type 组合 multipart/form-data的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！