2017-02-19 2 views
0

Ich versuche zum Hochladen von Dateien über den Browser mit dem Web Api und kantig azurblau, habe ich dieses Beispiel gefolgt: (! Nicht sicher, ob dies die richtige Implementierung ist) https://ppolyzos.com/2016/02/07/upload-a-file-to-azure-blob-storage-using-web-api/Hochladen von Dateien nach Azure über Web Api wirft nicht unterstützte Medientyp-Ausnahme?

ich die Anfrage von Winkel Service senden :

this.PostFiles = function (files) { 
    var req = $http.post('/api/GENAccounts/UploadFile', files); 
    return req; 
} 

und die files ist eine Anordnung von Dateien, die vom Benutzer ausgewählt

<input type="file" ngf-select="uploadFiles($files, $invalidFiles)" multiple accept="image/*" ngf-max-height="1000" ngf-max-size="3MB" /> 

I auch den gleichen Test in dem Schritt gefolgt ar tikel, indem einfache Zeichenfolge über Postman, und es immer noch die gleichen Fehler werfen, und diese Aussage immer true

if (!Request.Content.IsMimeMultipartContent("form-data")) 
      { 
       throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 
      } 

In seiner Implementierung zurückkehren, so sieht er nicht in dem Web-api POSTed Objekt definieren, die ungewöhnliche Verhalten ist mich. So, wie die Dateien an Web-API übergeben, und in jedem Format, das diesen Test form-data bestehen kann?

+0

Haben Sie dieses Problem gelöst, irgendwelche Updates? –

Antwort

0

Gemäß Ihrer Beschreibung habe ich das Codebeispiel, das Sie zum Erstellen meiner Web-API angegeben haben, befolgt. Ich könnte es wie erwartet auf meiner Seite arbeiten lassen. Wenn Postman mit zu testen, müssen Sie Content-Typen zu form-data und Datentyp file wie folgt festgelegt:

Basierend auf Ihrem JavaScript-Code, Sie $http.post verwenden, um Ihre Datei (en) während hochladen Request.Content.IsMimeMultipartContent empfängt den angegebenen Inhalt multipart/form-data in Ihrem Web-API-Back-End.

Per mein Verständnis, für eine einfache Art und Weise könnten Sie Upload.upload() für multipart/form-data Upload-Cross-Browser nutzen, wie folgt:

HTML

<body ng-app="fileUpload" ng-controller="MyCtrl"> 
    <input type="file" ngf-select="uploadFiles($files)" ngf-multiple="true" ng-model="files" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-height="1000" ngf-max-size="3MB"/> 
</body> 

Javascript

var app = angular.module('fileUpload', ['ngFileUpload']); 
app.controller('MyCtrl', function ($scope, Upload) { 
    $scope.uploadFiles = function (files) { 
     if (files && files.length) { 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       Upload.upload({ 
        url: '/api/GENAccounts/UploadFile', 
        data: { file: file } 
       }).then(function (resp) { 
        console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data); 
       }, function (resp) { 
        console.log('Error status: ' + resp.status); 
       }, function (evt) { 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
       }); 
      } 
     } 
    }; 
}); 

Hinweis: Für detailliertere Beispiele können Sie die Verwendungsproben von ng-file-upload folgen.

Darüber hinaus müssen Sie die _supportedMimeTypesMiME Types im AzureStorageMultipartFormDataStreamProvider.cs wie folgt ändern:

private readonly string[] _supportedMimeTypes = { "image/png", "image/jpeg", "image/jpg" };

Auch gibt ein case ist darüber reden, wie sich Http-Datei-Upload Arbeit, Sie darauf verweisen können.

Verwandte Themen