使用(AngularJS 2)和ASP.net MVC Web API上传文件 [英] File Upload using (AngularJS 2) and ASP.net MVC Web API

问题描述

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

I'm trying to upload a file with AngularJS 2 rc5 and asp.net mvc. I cant find a way to upload file in angularjs 2 and asp.net 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));
                    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;
     }

这篇关于使用(AngularJS 2)和ASP.net MVC Web API上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！