Upload in WebApi in AngularJS + Typescript (ng-Datei-Upload)

Ich beginne mit AngularJS und Typoskript, und ich versuche, ein Formular hochladen, die mit einer Seite auf WebAPI kommuniziert. Aber ich verstehe immer noch nicht den Winkel der Syntax und wie die Direktiven und Controller.Upload in WebApi in AngularJS + Typescript (ng-Datei-Upload)

Ich sehe viele Beispiele mit AngularJS mit reinem Javascript, aber kann den JavaScript-Code nicht in Typoskript umwandeln. Ich verwende die ng-file-upload Bibliothek. Ich bin ein 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>

Typoskript:

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

Meine Funktion in CS # -WebApi die Datei zu empfangen:

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

Ich wollte Um zu versuchen, die eckige Datei kommt in WebAPI der Controller, und behandeln Sie es als ein Byte [], aber ich kann nicht. Was mache ich falsch? Danke Ihnen allen.

Quelle

2016-04-29 Wesley

Sie versuchen, ein Objekt zu schreiben

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

aber Ihre API erwartet zwei Werte

Post(string Name, Byte[] Image)

Versuchen Sie, Sie API ein Objekt mit zwei Parametern zu erhalten, wie folgt aus:

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

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

Quelle

2016-04-29 13:25:37

Upload in WebApi in AngularJS + Typescript (ng-Datei-Upload)

Antwort

Verwandte Themen