我正在使用带有ASP.NET核心Web API的Angular 2来实现文件上传来处理请求.
我的HTML代码如下:
<input #fileInput type="file"/> <button (click)="addFile()">Add</button>
和angular2代码
addFile(): void { let fi = this.fileInput.nativeElement; if (fi.files && fi.files[0]) { let fileToUpload = fi.files[0]; this.documentService .uploadFile(fileToUpload) .subscribe(res => { console.log(res); }); } }
和服务看起来像
public uploadFile(file: any): Observable<any> { let input = new FormData(); input.append("file",file,file.name); let headers = new Headers(); headers.append('Content-Type','multipart/form-data'); let options = new RequestOptions({ headers: headers }); return this.http.post(`/api/document/Upload`,input,options); }
和控制器代码
[HttpPost] public async Task Upload(IFormFile file) { if (file == null) throw new Exception("File is null"); if (file.Length == 0) throw new Exception("File is empty"); using (Stream stream = file.OpenReadStream()) { using (var binaryReader = new BinaryReader(stream)) { var fileContent = binaryReader.ReadBytes((int)file.Length); //await this.UploadFile(file.ContentDisposition); } } }
我的RequestHeader看起来像
POST /shell/api/document/Upload HTTP/1.1 Host: localhost:10050 Connection: keep-alive Content-Length: 2 Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJDb3JyZWxhdGlvbklkIjoiZDZlNzE0OTUtZTM2MS00YTkxLWExNWUtNTc5ODY5NjhjNDkxIiwiVXNlcklkIjoiMSIsIlVzZXJOYW1lIjoiWjk5OTkiLCJXb3Jrc3BhY2UiOiJRc3lzVFRAU09BVEVNUCIsIk1hbmRhbnRJZCI6IjUwMDEiLCJDb3N0Q2VudGVySWQiOiIxMDAxIiwiTGFuZ3VhZ2VDb2RlIjoiMSIsIkxhbmd1YWdlU3RyaW5nIjoiZGUtREUiLCJTdGF0aW9uSWQiOiI1NTAwMSIsIk5hbWUiOiJJQlMtU0VSVklDRSIsImlzcyI6InNlbGYiLCJhdWQiOiJodHRwOi8vd3d3LmV4YW1wbGUuY29tIiwiZXhwIjoxNDk1Mzc4Nzg4LCJuYmYiOjE0OTUzNzUxODh9.5ZP7YkEJ2GcWX9ce-kLaWJ79P4d2iCgePKLqMaCe-4A Origin: http://localhost:10050 User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/58.0.3029.110 Safari/537.36 Content-Type: multipart/form-data Accept: application/json,text/plain,*/* Referer: http://localhost:10050/fmea/1064001/content Accept-Encoding: gzip,deflate,br Accept-Language: en-US,en;q=0.8
我面临的问题是控制器中的文件始终为null.
请有人帮助我搞清楚这个问题.
提前致谢.
解决方法
您不需要对FormData使用’multipart / form-data’
在Angular 2组件中:
<input type="file" class="form-control" name="documents" (change)="onFileChange($event)" /> onFileChange(event: any) { let fi = event.srcElement; if (fi.files && fi.files[0]) { let fileToUpload = fi.files[0]; let formData:FormData = new FormData(); formData.append(fileToUpload.name,fileToUpload); let headers = new Headers(); headers.append('Accept','application/json'); // DON'T SET THE Content-Type to multipart/form-data,You'll get the Missing content-type boundary error let options = new RequestOptions({ headers: headers }); this.http.post(this.baseUrl + "upload/",formData,options) .subscribe(r => console.log(r)); } }
在API方面
[HttpPost("upload")] public async Task<IActionResult> Upload() { var files = Request.Form.Files; foreach (var file in files) { // to do save } return Ok(); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。