0

Ich versuche, eine Datei von AngularJS auf ASP.NET WebAPI hochzuladen. Aus irgendeinem Grund wird es von WebAPI mit einem 404-Statuscode zurückgewiesen. Hier ist der Code:Angular multipart Formular Daten hochladen webapi 404

Angular JS:

function upload(file, assessmentId, progressCallback) { 
    var formData = new FormData(); 
    formData.append('file', file, file.name); 
    formData.append('assessmentId', assessmentId); 

    // post the file 
    return $http({ 
     data: formData, 
     headers: { 'Content-Type': undefined }, 
     method: 'POST', 
     url: _api('api/video/upload') 
    }); 
} 

auch versucht:

function upload(file, assessmentId, progressCallback) { 
    var formData = new FormData(); 
    formData.append('file', file, file.name); 
    formData.append('assessmentId', assessmentId); 

    return $http.post(_api('api/video/upload'), formData, { 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }); 
} 

C# WebAPI:

[HttpPost] 
[Route("api/video/upload")] 
public async Task<IHttpActionResult> Upload() 
{ 
    if (!Request.Content.IsMimeMultipartContent("form-data")) 
     return StatusCode(HttpStatusCode.UnsupportedMediaType); 

    /* do stuff */ 

    return Ok(new { test = "ing" }); 
} 

Wenn ich formData.append('file', file, file.name); Kommentar aus, so dass nur die assessmentId anhängt, WebAPI nimmt die Anfrage an.

file stammt von der HTML-Datei Upload-Steuerelement: element[0].files[0]. Ich frage mich, ob das der Fehler ist?

Eine andere Sache zu beachten ist in der Chrome Developer Tools Console, nach dem POST-Fehler 404, gibt es einen CORS-Fehler auf der gleichen Anfrage. Ich habe gesehen, dass dies vor dem Ausfall von WebApi passiert ist, aber ich glaube nicht, dass es tatsächlich einen CORS-Fehler gibt, weil es funktioniert, wenn ich die Datei von der Anfrage ausschließe.

Aktualisieren
Die Handlung verdickt sich. Es funktioniert gut mit kleinen Dateien (ein paar MB). Wenn ich eine 27-MB-Datei hochlade, erhalte ich einen 500-Fehler, der besagt, dass die maximale Anforderungslänge überschritten wurde. Groß! Irgendwo ankommen. Aber wenn ich eine 56MB Datei hochlade, bekomme ich den 404 Status Code. Was ist denn hier los?

Mit der folgenden Konfiguration, die 27MB-Datei funktioniert, aber die 56MB-Datei gibt noch 404.

<location path="api/video/upload"> 
    <system.web> 
     <httpRuntime executionTimeout="86400" maxRequestLength="4194304" /> 
    </system.web> 
</location> 
+0

Haben Sie versucht, Datei-Upload-Richtlinien von AngularJS –

+0

@RohanKawade nicht, aber ich habe diesen gleichen Code an anderer Stelle verwendet wird (mit kantigem Audio Recorder) und es funktioniert gut. –

+0

@RohanKawade Allerdings verwende ich eine Direktive abgeleitet von [hier] (https://uncorkedstudios.com/blog/multiformatformdata-file-upload-with-angularjs) um das Eingabeelement zu binden. –

Antwort

0

Ok, mit frischen Augen, ich habe die Ursache erreichen. Es gibt noch weitere Konfigurationseinstellungen, um die Anforderungsgröße in ASP.NET zu begrenzen. Der Code im OP ist in Ordnung. Diese Konfiguration ist erforderlich (4GB Grenze):

<location path="api/video/upload"> 
    <system.web> 
     <httpRuntime executionTimeout="86400" maxRequestLength="4194303" /> 
    </system.web> 
    <system.webServer> 
     <security> 
      <requestFiltering> 
       <requestLimits maxAllowedContentLength="4294967295" /> 
      </requestFiltering> 
     </security> 
    </system.webServer> 
</location> 

Und um diese Antwort eine vollständige Lösung zu sein, hier ist der Code wieder:

Angular JS Service Operation:

upload: function (file, assessmentId, progressCallback) { 
    var formData = new FormData(); 
    formData.append('file', file, file.name); 
    formData.append('assessmentId', assessmentId); 

    // post the file 
    return $http({ 
     data: formData, 
     headers: { 'Content-Type': undefined }, 
     method: 'POST', 
     url: _api('api/video/upload') 
    }); 
} 

WebAPI Aktion:

[HttpPost] 
[Route("api/video/upload")] 
public async Task<IHttpActionResult> Upload() 
{ 
    if (!Request.Content.IsMimeMultipartContent("form-data")) 
     return StatusCode(HttpStatusCode.UnsupportedMediaType); 

    /* do stuff */ 

    return Ok(new { test = "ing" }); 
} 

WebAPI web.config:

<location path="api/video/upload"> 
    <system.web> 
     <httpRuntime executionTimeout="86400" maxRequestLength="4194303" /> 
    </system.web> 
    <system.webServer> 
     <security> 
      <requestFiltering> 
       <requestLimits maxAllowedContentLength="4294967295" /> 
      </requestFiltering> 
     </security> 
    </system.webServer> 
</location>