英文:
File upload from Angular - Set file content to Dto
问题
我在Swagger中添加了一个IOperationFilter，以便我可以从Swagger UI测试我的API的文件上传。我的DTO如下：
public class ResourceCreateDto : EntityDto
{
public string Title { get; set; }
public string Description { get; set; }
public IFormFile File { get; set; } // 文件内容在这里
public string ExtendedData { get; set; }
}
ASP.NET Core API如下：
public async Task<ResourceDto> Create([FromForm] ResourceCreateDto input)
这样，我可以同时上传文件和其他数据（有些人建议先保存文件，然后在另一个调用中保存数据）。
我不确定的是如何在Angular端与Abp一起使用它。尽管代理已生成，但如何让Angular客户端使用[File]属性并将其数据与其余部分一起发送到服务器API呢？
英文:
I added a IOperationFilter to swagger so that I can test file uploads for my apis from swagger ui. My Dto is like;
public class ResourceCreateDto : EntityDto
{
public string Title { get; set; }
public string Description { get; set; }
public IFormFile File { get; set; } //file content here
public string ExtendedData { get; set; }
}
Asp.net Core API is:
public async Task<ResourceDto> Create([FromForm] ResourceCreateDto input)
This way I can upload file & other data at the same time (Some have suggested to save file 1st and then save data in another call).
What I am not sure is how to use it in Angular end with Abp. Even though proxies are generated how can I get the angular client to use [File] property and post it's data with the rest to server api?
答案1
得分: 1
create DTO:
export class ResourceCreateDto {
title: String;
description: String;
extendedData: String;
file: File;
}
in HTML:
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.title"/>
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.description"/>
<input class="form-control" type="file" [(ngModel)]="resourceCreateDto.extendedData"/>
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.file" (change)="onChangeFile($event)"/>
<button class="btn btn-primary" type="button" (click)="submit()">Add new</button>
in component:
resourceCreateDto: ResourceCreateDto;
file: any;
ngOnInit(): void {
//...
this.resourceCreateDto = new ResourceCreateDto();
}
onChangeFile(event) {
this.file = event.srcElement.files;
}
submit() {
let formData: FormData = new FormData();
formData.append('title', this.resourceCreateDto.title + '');
formData.append('description', this.resourceCreateDto.description + '');
formData.append('extendedData', this.resourceCreateDto.extendedData + '');
formData.append('file', this.file[0], this.file[0].name);
// use service to call API
// declare your httpClient
this.httpClient.post<httpResponse>(`${this.BASEURL}/...`, formData, this.getHttpFileOptions(your token))
.subscribe(response => {
console.log(response);
},
error => {
console.log(error);
});
}
setting option for HTTP:
getHttpFileOptions(token: String): object {
return {
observe: 'response',
responseType: 'json',
headers: new HttpHeaders({
"Accept": "application/json",
'Authorization': 'Bearer ' + token
})
};
}
action in server:
[HttpPost("Create")]
public IActionResult Create([FromForm] ResourceCreateDto model, IFormFile File)
英文:
create DTO:
export class ResourceCreateDto{
title : String;
description: String;
extendedData : String;
file: File;
}
in html
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.title"/>
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.description"/>
<input class="form-control" type="file" [(ngModel)]="resourceCreateDto.extendedData"/>
<input class="form-control" type="text" [(ngModel)]="resourceCreateDto.file" (change)="onChangeFile($event)"/>
<button class="btn btn-primary" type="button" (click)="submit()"> Add new </button>
in component
resourceCreateDto: ResourceCreateDto;
file: any;
ngOnInit(): void {
//..
resourceCreateDto = new ResourceCreateDto();
}
onChangeFile(event){
this.file = event.srcElement.files;
}
submit(){
let formData: FormData = new FormData();
formData.append('title', this.resourceCreateDto.title + '');
formData.append('description', this.resourceCreateDto.description + '');
formData.append('extendedData', this.resourceCreateDto.extendedData + '');
formData.append('file', this.file[0], this.file[0].name);
// use service call api
// declare your httpClient
this.httpClient.post<httpResponse>(`${this.BASEURL}/...`, formData,
this.getHttpFileOptions(your token))
.subscribe(response =>{
console.log(response);
},
error=>{
console.log(error);
})
}
setting option http
getHttpFileOptions(token: String): object{
return {
observe: 'response',
responseType: 'json',
headers: new HttpHeaders({
"Accept": "application/json",
'Authorization': 'Bearer ' + token
})
};
}
action in server
[HttpPost("Create")]
public IActionResult Create([FromForm]ResourceCreateDto model, IFormFile File)
Hope to help you!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论