[英]Use multipart/form-data to send files in Angular 6
I try to send two fields to a backend service. 我尝试将两个字段发送到后端服务。 One is a common string and the other is a file field.
一个是公用字符串,另一个是文件字段。 When I try to use the post method of the Http Client I recieve an 500 Error from the server telling me that the content-type is not a multipart request.
当我尝试使用Http Client的post方法时,服务器收到500错误消息,告诉我内容类型不是多部分请求。
add-new-language.component.html
附加新language.component.html
<form [formGroup]="form" (ngSubmit)="sendForm()">
<input
type="file"
formControlName="file"
(change)="onFileChanged($event)"
/>
<mat-form-field class="new-language__language-select">
<mat-select placeholder="Seleziona la lingua" formControlName="language">
<mat-option *ngFor="let lang of languages" [value]="lang.id">{{lang.label}}</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button [disabled]="form.invalid">Upload</button>
</form>
add-new-language.component.ts
附加新language.component.ts
export class AddNewLanguageComponent implements OnInit {
@Input() languages: Type[];
form: FormGroup;
file: File;
constructor() {
private fb: FormBuilder;
private dictionariesService: DictionariesService;
}
ngOnInit() {
this.initForm();
}
private initForm(): void {
this.form = this.fb.group({
file: [null, Validators.required],
language: [null, Validators.required]
});
}
onFileChanged(event): void {
if (event.target.files && event.target.files.length) {
this.file = <File>event.target.files[0];
}
}
sendForm(): void {
this.dictionariesService
.saveSynonymsFile(this.form, this.file)
.subscribe(response => console.log(response));
}
}
dictionaries.service.ts
dictionaries.service.ts
saveSynonymsFile(form: FormGroup, file: File): Observable<DictionaryFile> {
const formData = new FormData();
formData.append('lang', form.value.language);
formData.append('synonyms', file);
return this.http.post<DictionaryFile>(
`${this.querySettingsUrl}/synonyms`,
formData
);
}
I tried also to force the HttpHeaders with Content-Type: multipart/form-data but nothing to do. 我也尝试用Content-Type强制HttpHeaders:multipart / form-data但无所事事。 The browser always send the data through Content-Type: application/json
浏览器始终通过Content-Type发送数据:application / json
Instead of creating service for saving file, importing RxFormBuilder
from @rxweb, Create its object and use toFormData()
method that will convert the json data to formData, Here i have passed a link of api on the server side for your reference, it will pass the fileObject to the server. 不是创建用于保存文件的服务,
RxFormBuilder
从@rxweb导入RxFormBuilder
,创建其对象并使用toFormData()
方法,该方法会将json数据转换为formData,这里我在服务器端传递了api链接供您参考,它将将fileObject传递给服务器。 When you add [writeFile]="true"
in the html, you dont need to call onFileChanged($event) 在html中添加
[writeFile]="true"
时,无需调用onFileChanged($ event)
Component.html: Component.html:
export class AddNewLanguageComponent implements OnInit {
@Input() languages: Type[];
form: RxFormGroup;
api:string = 'api/User'
constructor(private fb: RxFormBuilder,private http: HttpClient) {}
ngOnInit() {
this.initForm();
}
private initForm(): void {
this.form = <RxFormGroup>this.fb.group({
file: [null, Validators.required],
language: [null, Validators.required]
});
}
sendForm(): void {
let formdata = this.form.toFormData()
this.http.post(this.api, formdata); // This is fake uri, This is just for your reference
}
}
And in the component.html : 并在component.html中:
<form [formGroup]="form" (ngSubmit)="sendForm()">
<input
type="file"
formControlName="file"
[writeFile]="true"
/>
<mat-form-field class="new-language__language-select">
<mat-select placeholder="Seleziona la lingua" formControlName="language">
<mat-option *ngFor="let lang of languages" [value]="lang.id">{{lang.label}}</mat-option>
</mat-select>
<button>Upload</button>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.