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

【问题标题】：File Upload using (AngularJS 2) and ASP.net MVC Web API使用 (AngularJS 2) 和 ASP.net MVC Web API 上传文件
【发布时间】：2016-08-24 19:40:33
【问题描述】：

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

【问题讨论】：

您需要更具体地说明您正在苦苦挣扎的部分，并分享您迄今为止提出的任何代码。
PrimeNG 有一个文件上传组件，你可以试试。 primefaces.org/primeng/#/fileupload

标签： angular

【解决方案1】：

终于

解决方案

这对我有用

上传.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));
                    observer.complete();
                } 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('http://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;
     }

【讨论】：

什么是 serverFileName？