在 AngularJS + Typescript 中上传到 WebApi (ng-file-upload)答案

【问题标题】：Upload to WebApi in AngularJS + Typescript (ng-file-upload)在 AngularJS + Typescript 中上传到 WebApi (ng-file-upload)
【发布时间】：2016-08-24 00:43:11
【问题描述】：

我从 AngularJS 和 typescript 开始，我正在尝试制作一个与 WebAPI 上的页面通信的表单上传。但是我仍然无法理解语法的角度以及指令和控制器的方式。

我看到很多使用 AngularJS 和纯 Javascript 的示例，但无法将 javascript 代码转换为打字稿。我正在使用ng-file-upload 库。我是菜鸟:(

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>

打字稿：

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

我在 CS#-WebApi 中接收文件的函数：

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

我想尝试让 angular 文件到达控制器的 WebAPI 中，并将其视为 Byte []，但我做不到。我究竟做错了什么？谢谢大家。

【问题讨论】：

标签： c# angularjs asp.net-web-api upload typescript

【解决方案1】：

你正在尝试发布一个对象

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

但您的 API 需要两个值

Post(string Name, Byte[] Image)

尝试更改您的 API 以获取具有两个参数的对象，如下所示：

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

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

【讨论】：