在每个地方不同的内容类型的JavaScript（或角）组成的multipart / form-data的 [英] Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)

问题描述

的错题问，见下面我更新的

我要我的AngularJS项目与现有的RESTful API集成。这些API消耗POST请求，上传文件，以及在请求提交表单数据。不幸的是，表单输入的一个要求是在内容类型：应用程序/ 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.

在网络上搜索后，我只能 POST 与内容类型：多重/ form-data的中其中每个部分不具有特定的 MIME 。
我怎样才能谱写我的的multipart / form-data的用不同的 MIME JavaScript中每一个部分？

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多部分用JSON


3. http://$c$c.activestate.com/recipes/578846-composing-a-postable-http-request-with-multipartfo/


4. application/x-www-form-urlen$c$cd或的multipart / form-data的？


5. http://stackoverflow.com/a/9082243/764592

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 or multipart/form-data?
5. http://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.

一旦问一个错误的问题再次抱歉。

Once again sorry for asking a wrong question.

推荐答案

据<一个文档href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects\"><$c$c>FormData,您可以通过使用 的Blob 构造：

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"}');

这不幸的是，不设置内容类型头。

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

这篇关于在每个地方不同的内容类型的JavaScript（或角）组成的multipart / form-data的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！