使用(AngularJS 2)和ASP.net MVC Web API上传文件

本文介绍了使用(AngularJS 2)和ASP MVC Web API上传文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试使用AngularJS 2 rc5和asp mvc上传文件. 我找不到在angularjs 2和asp mvc中上传文件的方法.

I'm trying to upload a file with AngularJS 2 rc5 and asp mvc. I cant find a way to upload file in angularjs 2 and asp mvc.

推荐答案

最终

解决方案

这对我有用

upload.service.ts文件

import {Injectable}from '@angular/core'; import {Observable} from 'rxjs/Rx'; @Injectable() export class UploadService { progress$: any; progress: any; progressObserver: any; constructor() { this.progress$ = Observable.create(observer => { this.progressObserver = observer }).share(); } makeFileRequest(url: string, params: string[], files: File[]): Observable<any> { return Observable.create(observer => { let formData: FormData = new FormData(), xhr: XMLHttpRequest = new XMLHttpRequest(); for (let i = 0; i < files.length; i++) { formData.append("uploads[]", files[i], files[i].name); } xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { observer.next(JSON.parse(xhr.response)); observerplete(); } else { observer.error(xhr.response); } } }; xhr.upload.onprogress = (event) => { this.progress = Math.round(event.loaded / event.total * 100); this.progressObserver.next(this.progress); }; xhr.open('POST', url, true); var serverFileName = xhr.send(formData); return serverFileName; }); } }

和appcomponnet.ts文件

import {Component } from 'angular2/core'; import {UploadService} from './app.service'; @Component({ selector: 'my-app', template: ` <div> <input type="file" (change)="onChange($event)"/> </div> `, providers: [ UploadService ] }) export class AppComponent { picName: string; constructor(private service:UploadService) { this.service.progress$.subscribe( data => { console.log('progress = '+data); }); } onChange(event) { console.log('onChange'); var files = event.srcElement.files; console.log(files); this.service.makeFileRequest('localhost:8182/upload', [], files).subscribe(() => { console.log('sent'); this.picName = fileName; }); } }

和操作方法

public HttpResponseMessage UploadFile() { var file = HttpContext.Current.Request.Files[0]; if (file.ContentLength > 0) { var fileName = Path.GetFileName(file.FileName); var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName); file.SaveAs(path); var content = JsonConvert.SerializeObject(serverFileName, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }); var response = Request.CreateResponse(HttpStatusCode.OK); response.Content = new StringContent(content, Encoding.UTF8, "application/json"); return response; }