使用Javascript (或Angular)在每个部分上使用不同的Content-Type组成多部分/表单数据
使用Javascript (或Angular)在每个部分上使用不同的Content-Type组成多部分/表单数据
提问于 2014-07-02 23:28:10
问错了问题，请看我下面的更新
我需要将我的AngularJS项目与现有的RESTful应用程序接口集成。这些应用程序接口使用POST请求哪个upload a file，并在请求中提交表单数据。不幸的是，其中一个表单输入必须是Content-Type: Application/json格式的。
在网上搜索后，我只能使用Content-Type: multipart/form-data进行POST，其中每个部件都没有特定的MIME。我如何为Javascript中的每个部分使用不同的MIME来组成我的multipart/form-data？
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--相关参考文献：
- https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
- REST - HTTP Post Multipart with JSON
- http://code.activestate.com/recipes/578846-composing-a-postable-http-request-with-multipartfo/
- application/x-www-form-urlencoded or multipart/form-data?
- https://stackoverflow.com/a/9082243/764592
更新
为问错问题而道歉。最初的问题是，我可以看到服务器调用逻辑，例如，
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我还设法弄清楚了如何提交这样的post请求。我将在下面发布我的答案。
再次抱歉，我问错了问题。
回答 3
Stack Overflow用户
发布于 2014-07-02 23:34:05
根据FormData的文档，您可以使用Blob构造函数向字段追加特定的内容类型：
var formData = new FormData();
formData.append('items', new Blob([JSON.stringify({
name: "Book",
quantity: "12"
})], {
type: "application/json"
}));经过仔细观察，它将按如下方式发送部分：
Content-Disposition: form-data; name="items"; filename="blob"
Content-Type: text/json唯一可以避免自己构建整个请求的替代方法是传递一个字符串值：
formData.append('items', '{"name": "Book", "quantity": "12"}');不幸的是，这并没有设置Content-Type头。
Stack Overflow用户
发布于 2014-07-04 00:37:30
错误#1:我错误地假设项必须是json，这样我们才能调用它的属性。
解决方案:提交一个包含一个文件和一个类似格式的对象的多部分请求非常简单。
form = new FormData();
form.append('items[name]', 'Book');
form.append('items[quantity]', 12);
form.append('image', imageFile);
form.append('owner', 'John Doe');因此，请求头和正文将如下所示
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[name]"
Book
------border
Content-Disposition: form-data; name="items[quantity]"
12
------border--Stack Overflow用户
发布于 2019-04-19 06:07:59
在我将Content-Type头设置为undefined之前，没有任何东西可以让它工作。在我的例子中，我发布了一个文件和一些json。
public uploadFile(code: string, file):angular.IHttpPromise<any>{
var data = `{"query":"mutation FIRMSCORECARD_CALCULATE($code:String!){ FirmScorecardMutation{ BatchCalculate(Code:$code) }}","variables":{"code":"${code}"},"operationName":"FIRMSCORECARD_CALCULATE"}`;
var formData = new FormData();
formData.append('operations', data);
formData.append('file', file, file.name);
let config = {
headers: {
'Accept': 'application/json',
'Content-Type': undefined
}
};
let response = this.$http.post(this.graphqlUrl, formData, config);
return response;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24535189
复制相关文章
相似问题