[英]Upload file from angular to asp.net core web api controller
[英]How to Upload File from Angular to ASP.NET Core Web API
有人问过类似的问题,但在浏览了所有这些问题和许多关于该主题的博客文章后,我无法弄清楚这一点,所以请原谅我。
我正在创建一个简单的博客(出于这个问题的目的)两部分,Angular 8 中的前端 SPA 和 ASP.NET Core 3 中的后端 API。在我前端的一部分中,我试图上传用作新创建博客的图像的图像。 当我尝试上传图像时,后端生成的 IFormFile 始终为null
。 以下是代码,非常感谢任何帮助!
新博客.component.html:
<form [formGroup]="newBlogForm" (ngSubmit)="onSubmit(newBlogForm.value)">
<div>
<label for="Name">
Blog Name
</label>
<input type="text" formControlName="Name">
</div>
<div>
<label for="TileImage">
Tile Image
</label>
<input type="file" formControlName="TileImage">
</div>
<button type="submit">Create Blog</button>
</form>
新博客.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { BlogService } from '../blog-services/blog.service';
@Component({
selector: 'app-new-blog',
templateUrl: './new-blog.component.html',
styleUrls: ['./new-blog.component.css']
})
export class NewBlogComponent implements OnInit {
private newBlogForm: FormGroup;
constructor(private formBuilder: FormBuilder, private blogService: BlogService) { }
ngOnInit() {
this.newBlogForm = this.formBuilder.group({
Name: new FormControl(null),
TileImage: new FormControl(null)
});
}
onSubmit(blogData: FormData) {
console.log('new blog has been submitted.', blogData);
this.blogService.postBlog(blogData);
this.newBlogForm.reset();
}
}
postBlog
从blog.service.ts:
postBlog(blogData: FormData): Observable<any> {
const postBlogSubject = new Subject();
this.appOptions.subscribe(
(options) => {
const url = options.blogAPIUrl + '/Blogs';
this.http
.post(url, blogData)
.subscribe(
(blog) => {
postBlogSubject.next(blog);
}
);
}
);
return postBlogSubject.asObservable();
}
我的 BlogController 的签名如下所示:
[HttpPost]
public async Task<ActionResult<Blog>> PostBlog([FromForm]PostBlogModel blogModel)
与 PostBlogModel 如下:
public class PostBlogModel
{
public string Name { get; set; }
public IFormFile TileImage { get; set; }
}
我已经实现了日志中间件来尝试调试。 输出如下(我看到由于某种原因,前端正在发送 application/json 而不是 multipart/form-data 但我不确定为什么或如何修复......)
blogapi_1 | info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
blogapi_1 | Request finished in 170.16740000000001ms 500
blogapi_1 | info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
blogapi_1 | Request starting HTTP/1.1 OPTIONS http://localhost:5432/api/v1/Blogs
blogapi_1 | dbug: BlogAPI.Middleware.RequestResponseLoggingMiddleware[0]
blogapi_1 | HTTP Request: Headers:
blogapi_1 | key: Connection, values: keep-alive
blogapi_1 | key: Accept, values: */*
blogapi_1 | key: Accept-Encoding, values: gzip, deflate, br
blogapi_1 | key: Accept-Language, values: en-US,en-IN;q=0.9,en;q=0.8,en-GB;q=0.7
blogapi_1 | key: Host, values: localhost:5432
blogapi_1 | key: Referer, values: http://localhost:5431/blog/new-blog
blogapi_1 | key: User-Agent, values: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
blogapi_1 | key: Origin, values: http://localhost:5431
blogapi_1 | key: Access-Control-Request-Method, values: POST
blogapi_1 | key: Access-Control-Request-Headers, values: content-type
blogapi_1 | key: Sec-Fetch-Site, values: same-site
blogapi_1 | key: Sec-Fetch-Mode, values: cors
blogapi_1 |
blogapi_1 | type:
blogapi_1 | scheme: http
blogapi_1 | host+path: localhost:5432/api/v1/Blogs
blogapi_1 | queryString:
blogapi_1 | body:
blogapi_1 | info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
blogapi_1 | CORS policy execution successful.
blogapi_1 | dbug: BlogAPI.Middleware.RequestResponseLoggingMiddleware[0]
blogapi_1 | HTTP Response: Headers:
blogapi_1 | key: Access-Control-Allow-Headers, values: Content-Type
blogapi_1 | key: Access-Control-Allow-Origin, values: http://localhost:5431
blogapi_1 |
blogapi_1 | statusCode: 204
blogapi_1 | responseBody:
blogapi_1 | info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
blogapi_1 | Request finished in 58.5088ms 204
blogapi_1 | info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
blogapi_1 | Request starting HTTP/1.1 POST http://localhost:5432/api/v1/Blogs application/json 56
blogapi_1 | dbug: BlogAPI.Middleware.RequestResponseLoggingMiddleware[0]
blogapi_1 | HTTP Request: Headers:
blogapi_1 | key: Connection, values: keep-alive
blogapi_1 | key: Content-Type, values: application/json
blogapi_1 | key: Accept, values: application/json, text/plain, */*
blogapi_1 | key: Accept-Encoding, values: gzip, deflate, br
blogapi_1 | key: Accept-Language, values: en-US,en-IN;q=0.9,en;q=0.8,en-GB;q=0.7
blogapi_1 | key: Host, values: localhost:5432
blogapi_1 | key: Referer, values: http://localhost:5431/blog/new-blog
blogapi_1 | key: User-Agent, values: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
blogapi_1 | key: Origin, values: http://localhost:5431
blogapi_1 | key: Content-Length, values: 56
blogapi_1 | key: Sec-Fetch-Site, values: same-site
blogapi_1 | key: Sec-Fetch-Mode, values: cors
blogapi_1 |
blogapi_1 | type: application/json
blogapi_1 | scheme: http
blogapi_1 | host+path: localhost:5432/api/v1/Blogs
blogapi_1 | queryString:
blogapi_1 | body: {"Name":"test","TileImage":"C:\\fakepath\\DSC_0327.jpg"}
我的 BlogController 看起来像这样:
[HttpPost] public async Task<ActionResult<Blog>> PostBlog([FromForm]PostBlogModel blogModel)
看来你是想用form-data来传递数据,实现可以参考下面的代码示例。
.component.html
<form [formGroup]="newBlogForm" (ngSubmit)="onSubmit(newBlogForm.value)">
<div>
<label for="Name">
Blog Name
</label>
<input type="text" formControlName="Name">
</div>
<div>
<label for="TileImage">
Tile Image
</label>
<input type="file" formControlName="TileImage" (change)="onSelectFile($event)" >
</div>
<button type="submit">Create Blog</button>
</form>
.component.ts
selectedFile: File = null;
private newBlogForm: FormGroup;
constructor(private http: HttpClient) { }
ngOnInit() {
this.newBlogForm = new FormGroup({
Name: new FormControl(null),
TileImage: new FormControl(null)
});
}
onSelectFile(fileInput: any) {
this.selectedFile = <File>fileInput.target.files[0];
}
onSubmit(data) {
const formData = new FormData();
formData.append('Name', data.Name);
formData.append('TileImage', this.selectedFile);
this.http.post('your_url_here', formData)
.subscribe(res => {
alert('Uploaded!!');
});
this.newBlogForm.reset();
}
测试结果
第一的
<input type="file">
使用ngModel
或formControlName
与 angular 绑定只会捕获value property
但实际上当我们提交表单时,我们需要files property
因此我们可以创建适用于所有项目的自定义指令<input type="file">
元素,所以当我们提交表单时,我们得到了 file 属性
前
import { Directive, forwardRef, HostListener, ElementRef, Renderer2 } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Directive({
selector : `input[type=file][formControlName],
input[type=file][formControl],
input[type=file][ngModel]`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: FileValueAccessorDirective,
multi: true
}
]
})
export class FileValueAccessorDirective implements ControlValueAccessor {
constructor(private elementRef: ElementRef, private render: Renderer2) {
}
// Function to call when the file changes.
onChange = (file: any) => {}
//fire when the form value changed programmaticly
writeValue(value: any): void {
}
//fire only one time to register on change event
registerOnChange = (fn: any) => { this.onChange = fn; }
//fire only one time to register on touched event
registerOnTouched = (fn: any) => { }
//Disable the input
setDisabledState?(isDisabled: boolean): void {
}
//listen to change event
@HostListener('change', ['$event.target.files'])
handleChange(file) {
this.onChange(file[0]);
}
}
后
要使用 Http 上传文件,您的数据应该使用multipart/form-data
进行编码,允许通过 http post 发送文件,以便使用FormData
,
FormData 对象将自动生成现有服务器可以处理的 MIME 类型 multipart/form-data 的请求数据。 要将文件字段添加到数据,请使用扩展可以从文件路径构造的 File 对象。 然后可以将 FormData 对象简单地传递给 XMLHttpRequest:
所以你的提交方法应该像
onSubmit() {
let formData: FormData = new FormData();
Object.keys(this.newBlogForm.value).forEach(key => {
formData.append(key, this.newBlogForm.value[key])
});
//pass formData to your service
}
第三个
在你的postBlog
方法中,你创建的Subject
没有任何好处,你可以只返回 http.post 然后在调用者方法中使用指定是subscribe
还是使用async/await
来触发 http 调用
onSubmit() {
.....
this.postBlog(formData).subscribe(
result => { }
);
}
async onSubmit() {
.....
let res = await this.postBlog(formData).toPromise();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.