2017-02-19 10 views
0

、私はこの例を踏襲してきました: https://ppolyzos.com/2016/02/07/upload-a-file-to-azure-blob-storage-using-web-api/Web経由でAzureにファイルをアップロードするApiはサポートされていないメディアタイプの例外をスローしますか?私は、Web APIと角度を使用してブラウザを介してAzureのためにファイルをアップロードしようとしている

私は角度サービスからの要求を送信する(これは右の実装である場合ではないことを確認!) :

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

filesは私もARに記載したのと同じ試験を、続い

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

ユーザによって選択されたファイルの配列でありますポストマンを経て、単純な文字列を渡すと、それはまだ同じエラーをスローし、常にこの文は、彼の実装ではtrue

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

を返すことでticle、彼はに異常な動作であるウェブAPIで掲示されるオブジェクトを定義していません私。だからどのようにファイルを渡すことができますどのような形式でWeb APIにファイルを渡すform-data

+0

この問題は解決しましたか? –

答えて

0

あなたの説明によると、私はWeb APIを構築するために提供したコード例に従っています。私の予想通りに動作させることができます。テストするポストマンを使用して、あなたは次のようにfileform-dataとデータ型にコンテンツタイプを設定する必要がある場合:

をJavaScriptコードに基づいて、あなたのファイルをアップロードする$http.postを使用していながら、 Request.Content.IsMimeMultipartContentは、指定されたコンテンツmultipart/form-dataをWeb APIのバックエンドで受信します。次のように私の理解パー

、簡単な方法のために、あなたはmultipart/form-dataアップロードクロスブラウザ用Upload.upload()を活用できます。

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); 
       }); 
      } 
     } 
    }; 
}); 

注:詳細サンプルについては、ng-file-uploadの使用例に従うことができます。

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

はまた、HTTPのファイルのアップロード作業は、あなたがそれを参照することができないかについて話しcaseがあり、次のように

はまた、あなたはAzureStorageMultipartFormDataStreamProvider.cs_supportedMimeTypesMiME Typesを変更する必要があります。

関連する問題