web2を使用して、angle2からファイルをアップロードする。c＃

Question

Angular2からWeb Api 2にファイルをアップロードしたいと思います。

私は、使用する必要があるオブジェクトの種類を実際にはあまり理解できません。

[HttpPost] 
[ResponseType(typeof(IEnumerable<Attachment>))] 
[SwaggerResponse(HttpStatusCode.OK, Type = typeof(IEnumerable<Attachment>))] 
public HttpResponseMessage UploadZip(FormData vale) 
{ 
} 

問題は次のとおりです。

いるFormDataは赤い下線で不明です。

角度：

fileChange(event) { 
    debugger; 
    let fileList: FileList = event.target.files; 
    if (fileList.length > 0) { 
     let file: File = fileList[0]; 
     let formData: FormData = new FormData(); 
     formData.append('uploadFile', file, file.name); 
     this.attachmentClient.uploadZip(formData).subscribe(result => console.log(result)); 
    } 
    } 

HTML：

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx,.zip"> 

私は実際にファイルオブジェクトの種類を理解することはできませんし、それらを使用する方法？もしあなたができるなら、それがどのように機能し、これを持つために何をすべきかを私に説明してください。

P.S.私はSwaggerを使ってサービスを作成しています。

Answer 1

あなたの問題は、フロントエンドからファイルを送信する方法にあると思われます。 FormData要素に正しく追加されていることがわかります（バックエンドでもパラメータを取得するためには、正確な名前 "uploadFile"を使用する必要があります）。

ただし、uploadZip関数の実装は表示されません。私は例としてそれを行った方法をあなたに提供していますので、それはあなたを助けるかもしれません：

makeFileRequest (params: string[], files: File[], employee:Employee, 
    doctype:string){ 
    return Observable.create(observer => { 
    let formData: FormData = new FormData(), 
     xhr: XMLHttpRequest = new XMLHttpRequest(); 

    formData.append("file", files[0]); 
    formData.append("type", doctype); 
    formData.append("employeeid", employee.id.toString()); 
    let token = localStorage.getItem('jwtToken'); 

    xhr.onreadystatechange =() => { 
     if (xhr.readyState === 4) { 
      if (xhr.status === 200) { 
       // observer.next(JSON.parse(xhr.response)); 
       console.log(xhr.response); 
       observer.next(); 
       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$); 
    }; 
    let url = "http://localhost:8080/docapi/documents/upload"; 
    xhr.open('POST', url, true); 
    xhr.setRequestHeader('Authorization', token); 
    xhr.send(formData); 
}); 
} 

希望します。

Answer 2

これはデータオブジェクトをAPIにアップロードする方法ではありません。これを参照してくださいhttps://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2

C＃にはFormDataオブジェクトがありません。このような

何かが役立ちます：

[HttpPost] 
public Task<HttpResponseMessage> PostFile() 
{ 
    HttpRequestMessage request = this.Request; 
    if (!request.Content.IsMimeMultipartContent()) 
    { 
     throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 
    } 

string root = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/uploads"); 
var provider = new MultipartFormDataStreamProvider(root); 

var task = request.Content.ReadAsMultipartAsync(provider).ContinueWith<HttpResponseMessage>(o => 
    { 
     string file1 = provider.BodyPartFileNames.First().Value; 

     return new HttpResponseMessage() 
      { 
       Content = new StringContent("File uploaded.") 
      }; 
     } 
    ); 
    return task; 
}