Загрузить файл с Angular2

Question

Я следил за учебником here, о том, как загружать файлы с помощью Angular2. Тем не менее, когда я пытаюсь реализовать код в своем проекте, результатом в моей консоли является только содержимое html страницы, а не ответ JSON, который предполагается отправлять через мой запрос POST на моем заднем конце (ядро asp.net). Под вкладкой в ​​сети это, кажется, делает POST правильным адресом, поэтому я не знаю, почему я получаю html-документ вместо данных ответа. Кто-нибудь знает, почему?

upload.html

<h2>Upload</h2> 
<input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." /> 
<button type="button" (click)="upload()">Upload</button> 

upload.ts

import * as ng from '@angular/core'; 

@ng.Component({ 
    selector: 'upload', 
    template: require('./upload.html') 
}) 
export class Upload { 
    filesToUpload: Array<File>; 

    constructor() { 
     this.filesToUpload = []; 
    } 

    upload() { 
     this.makeFileRequest("http://localhost:5000/api/SampleData/uploadFile", [], this.filesToUpload).then((result) => { 
      console.log(result); 
     }, (error) => { 
      console.error(error); 
     }); 
    } 

    fileChangeEvent(fileInput: any){ 
     this.filesToUpload = <Array<File>> fileInput.target.files; 
    } 

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) { 
     return new Promise((resolve, reject) => { 
      var formData: any = new FormData(); 
      var xhr = new XMLHttpRequest(); 
      for(var i = 0; i < files.length; i++) { 
       formData.append("uploads[]", files[i], files[i].name); 
      } 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4) { 
        if (xhr.status == 200) { 
         resolve(JSON.parse(xhr.response)); 
        } else { 
         reject(xhr.response); 
        } 
       } 
      } 

SampleData.cs

[HttpPost] 
    public IActionResult uploadFile() 
    { 
     var files = Request.Form.Files; 
     return Json("Working ? "); 
    } 

Answer 1

Сначала это выглядит как ваш ар e делать это прямо из угловой части, создавая данные формы. У меня были некоторые аналогичные проблемы с получением файлов правильно в POST-запросе в asp.net. Таким образом, я решил это, чтобы проанализировать содержимое из Запроса.

Сначала создайте пустой метод, это важно, иначе вы в конечном итоге с 404. Далее читать файл из объекта запроса:

[HttpPost] 
public IActionResult uploadFile() 
{ 
    var files = Request.Files; 
    if (Request.Form[0] == null || files[0] == null || files[0].ContentLength < 1) 
    { 
      // TODO log 
      Response.StatusCode = 400; 
      return Json("Please provide a file"); 
    } 
    // TODO parse the file(s) as you like :) 
    foreach (HttpPostedFile file in files) 
    { 
     file.SaveAs(file.FileName); 
    } 
} 

[Обновление для ядра asp.net]

изменил объект запроса в ядре asp.net, теперь данные формы в:

Request.Form.Files; 

Answer 2

Вот вариант

service.ts

uploadDealDocumentFile(document: DealDocument, files: File[]): Observable<any> { 
var url = BASE_URL + 'fileupload/'; 
return Observable.create(observer => { 
    let formData: FormData = new FormData(), 
    xhr: XMLHttpRequest = new XMLHttpRequest(); 

    for (let i = 0; i < files.length; i++) { 
    //formData.append("selectedDealId", document.dealId);   
    formData.append("uploads[]", files[i], document.dealCode + '-' + 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); 
    xhr.send(formData); 
}); 
} 

FileUploadController.cs

public class FileUploadController : ApiController 
{ 
    [HttpPost()] 
    public string UploadFiles() 
    { 
     string sPath = HostingEnvironment.MapPath("~/UploadDocs/"); 
     int iUploadedCnt = 0; 

     HttpFileCollection filesCollection = HttpContext.Current.Request.Files; 
     string id = HttpContext.Current.Request.Form["Id"]; 

     for (int i = 0; i <= filesCollection.Count - 1; i++) 
     { 
      HttpPostedFile file = filesCollection[i]; 

      if (file.ContentLength > 0) 
      { 
       if (!File.Exists(sPath + Path.GetFileName(file.FileName))) 
       {       
        file.SaveAs(sPath + Path.GetFileName(file.FileName)); 
        iUploadedCnt = iUploadedCnt + 1; 
       } 
      } 
     } 

     if (iUploadedCnt > 0) 
     { 
      return iUploadedCnt + " Files Uploaded Successfully"; 
     } 
     else 
     { 
      return "Upload Failed"; 
     } 
    } 
} 

Успехов !!