[英]FormData how to get or set boundary in multipart/form-data - Angular
I have a mini app, where I have to post a form data to an endpoint from browser.我有一个迷你应用程序,我必须从浏览器将表单数据发布到端点。
This is my post:这是我的帖子:
var formData = new FormData();
formData.append('blobImage', blob, 'imagem' + (new Date()).getTime());
return $http({
method: 'POST',
url: api + '/url',
data: formData,
headers: {'Content-Type': 'multipart/form-data'}
})
Boundaries seems to be added by formData to the parameter, however, I cannot get it to send in the header, how should I done?边界似乎是由 formData 添加到参数中的,但是,我无法让它在标头中发送,我应该怎么做?
好吧,似乎标题 ContentType 应该是未定义的,以便添加正确的边界
The correct way was not to set Content-Type
header.正确的方法是不设置
Content-Type
标头。
Example:例子:
import { http } from '@angular/common/http'
function sendPostData(form: FormData) {
const url = `https://post-url-example.com/submit`;
const options = {
headers: new HttpHeaders({
Authorization: `Bearer auth-token`
})
};
return http.post(url, form, options);
}
Further adding Pablo's answer .进一步添加巴勃罗的答案。
When http request body has a FormData
type, angular will defer Content-Type
header assignment to browser.当 http 请求正文具有
FormData
类型时,Angular 会将Content-Type
标头分配给浏览器。 detectContentTypeHeader()
will return null
on FormData
request body and angular won`t set request header. detectContentTypeHeader()
将在FormData
请求正文上返回null
,并且 angular 不会设置请求标头。
This was on @angular/commons/http/src/xhr.ts
module.这是在
@angular/commons/http/src/xhr.ts
模块上。
// Auto-detect the Content-Type header if one isn't present already.
if (!req.headers.has('Content-Type')) {
const detectedType = req.detectContentTypeHeader();
// Sometimes Content-Type detection fails.
if (detectedType !== null) {
xhr.setRequestHeader('Content-Type', detectedType);
}
}
Content-Type detection based on request body:基于请求体的 Content-Type 检测:
detectContentTypeHeader(): string|null {
// An empty body has no content type.
if (this.body === null) {
return null;
}
// FormData bodies rely on the browser's content type assignment.
if (isFormData(this.body)) {
return null;
}
// Blobs usually have their own content type. If it doesn't, then
// no type can be inferred.
if (isBlob(this.body)) {
return this.body.type || null;
}
// Array buffers have unknown contents and thus no type can be inferred.
if (isArrayBuffer(this.body)) {
return null;
}
// Technically, strings could be a form of JSON data, but it's safe enough
// to assume they're plain strings.
if (typeof this.body === 'string') {
return 'text/plain';
}
// `HttpUrlEncodedParams` has its own content-type.
if (this.body instanceof HttpParams) {
return 'application/x-www-form-urlencoded;charset=UTF-8';
}
// Arrays, objects, and numbers will be encoded as JSON.
if (typeof this.body === 'object' || typeof this.body === 'number' ||
Array.isArray(this.body)) {
return 'application/json';
}
// No type could be inferred.
return null;
}
Source:资源:
If anyone else is struggling with this... If you are submitting FormDate then the browser should be setting the content-type for you.如果其他人正在为此苦苦挣扎......如果您提交 FormDate 那么浏览器应该为您设置内容类型。 To get this working i just set the enctype header to for multipart/form-data
为了让它工作,我只需将 enctype 标头设置为 multipart/form-data
const formData = new FormData();
formData.append('file', file);
let headers = new HttpHeaders();
headers = headers.append('enctype', 'multipart/form-data');
return this.http.post(path, formData, { headers: headers })
I also had a HttpInterceptor which was setting the content-type so only set this when the enctype was not set我还有一个 HttpInterceptor 正在设置内容类型,所以只有在未设置 enctype 时才设置它
if (!req.headers.has('enctype')) {
headersConfig['Content-Type'] = 'application/json';
}
I hope this helps我希望这有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.