2016-04-29 2 views
1

私はAngularJSとtypescriptですし始めている、と私はWebAPIの上のページと通信し、フォームのアップロードを作成しようとしています。 しかし、それでもまだ、私は、構文の角度とどのディレクティブとコントローラを理解することはできません。アップロード(NG-ファイルアップロード)

私は純粋なJavaScriptでAngularJSを使用して多くの例を参照してください、しかし、活字にするJavaScriptコードを変換することはできません。私はng-file-uploadライブラリを使用しています。私はnoobのだ:(

HTML:

<html> 
<body> 
    <form action="#" method="post" ng-submit="vm.send($event)" class=""> 
    <p> 
     <label>Name</label> 
     <input type="text" 
      name="Name" 
      required="required" 
      ng-model="vm.Name"/> 
    </p> 
    <p> 
     <label>Image:</label> 
     <input type="file" 
      ngf-select name="file"  
      accept="image/*" ngf-max-size="2MB" 
      ng-model="vm.Image"/> 
    </p> 
    <p ng-show="vm.Image"> 
     <label>Preview:</label> 
     <img ngf-thumbnail="vm.Image" class="thumb"><button ng-click="vm.Image = null" ng-show="vm.Image">Remove</button> 
    </p> 
    <p> 
     <button type="reset" ng-click="vm.quit()">Quit</button> 
     <button>Send</button> 
    </p> 
    </form> 
</body> 
</html> 

活字体:CS#-WebApiで

module MyFramework.Controllers.upload { 
    export class UploadController { 
     public vm: any; 
     public window: any; 

     public static $inject = ["framework", "$http", "$scope", "Upload", "$timeout"]; 
     constructor(framework, private $http, private $scope, private $Upload, private $timeout) {} 

     send(event) { 
      event.preventDefault(); 
      this.$http.post("api/upload", this.vm) 
       .success((message) => { 
        alert("Ok");; 
       }) 
       .error((message) => { 
        alert("Error: " + message); 
       }); 
      this.$scope.uploadPic = function (file) { 
       file.upload = Upload.upload({ 
        url: 'api/upload', 
        data: { name: this.vm.Name, image: this.vm.Image } 
       }); 

       file.upload.then(function (response) { 
        this.$timeout(function() { 
         file.result = response.data; 
        }); 
       }, 
        function (response) { 
         if (response.status > 0) 
          this.$scope.errorMsg = response.status + ': ' + response.data; 
        }); 
      }); 
     } 

     quit() { 
      //quit window funtion 
     } 
    } 
} 

マイ機能ファイル受信する:

[HttpPost] 
public string Post(string Name, Byte[] Image) 
{ 
    //save the file in database 
} 

を私は望んでいました角度のファイルを作成しようとすると、WebAPIのコントローラに到着し、それが[]バイトとしてそこに扱うが、私は。私が間違って何をしていませんか?あなたのすべてをありがとうございました。

答えて

1

あなたがオブジェクト

this.$http.post("api/upload", this.vm) 

を投稿しようとしているが、あなたのAPIは、このような2つのパラメータを持つオブジェクトを取得するためにあなたのAPIを変更してみてください二つの値

Post(string Name, Byte[] Image) 

を期待している。

public class MyViewModel 
{ 
    public string Name {get;set;} 
    public byte[] File {get;set;} 
} 

[HttpPost] 
public string Post(MyViewModel vm) 
{ 
    //save the file in database 
}