将文件从Angular(1.5.7)传递到asp.net核心控制器

时间:2017-09-24 11:27:59

标签: javascript c# asp.net angularjs

我尝试使用表单然后使用angular(1.5.7)和C#将图像保存在服务器上以及有关它的一些信息。

我尝试了多种方式,传递给Api控制器的文件为空或模型状态无效。

你能告诉我我做错了什么吗?

我的C#控制器:

public class Data
{
    public PartnersViewModel newPartner { get; set; }
    public IFormFile file { get; set; }
}

}

数据类:

(function () {

"use strict";
// getting the existing module
angular.module("app-edit")
    .controller("partnersController", partnersController);


function partnersController($http, $scope) {

    var vm = this;

    vm.partners = [];

    vm.newPartner = {};

    vm.errorMessage = "";
    vm.isBusy = true;
    var f = null;

    $scope.add = function () {
        f = document.getElementById('uploader').files[0];
        if (f) {
            alert("File attached succesfully");
        }
    };

    $http.get("/api/partners").then(function (response) {
        //success
        angular.copy(response.data, vm.partners);
    }, function () {
        //failure
        vm.errorMessage = "failed to load data";
    })
        .finally(function () {
            vm.isBusy = false;
        });

    vm.addPartner = function () {

        vm.isBusy = true;
        vm.errorMessage = "";

        var Indata = { 'newPartner': vm.newPartner, 'file': f };

        $http.post("/api/partners", Indata)
            .then(function () {
                //success
                vm.partners.push(response.data);
                vm.newPartner = {};
            }, function () {
                //failure
                vm.errorMessage = "Failed to save new partner";
            })
            .finally(function () {
                vm.isBusy = false;
            });



    };



    vm.removePartner = function (name) {

        vm.isBusy = true;
        vm.errorMessage = "";

        $http.delete("/api/partners/" + name)
            .then(function () {
                //success
                //vm.partners.shift();
                //vm.newPartner = {};
                 vm.errorMessage = "Udało się usunąć partnera";
            }, function () {
                //failure
                vm.errorMessage = "Nie udało się usunąć partnera";
            })
            .finally(function () {
                vm.isBusy = false;
            });

    };

}

})();

角度控制器:

<div class="col-md-6 col-md-offset-3">
<div class="text-danger" ng-show="vm.errorMessage">{{ vm.errorMessage }}</div>
<wait-cursor ng-show="vm.isBusy"></wait-cursor>


<form novalidate name="newPartnerForm" method="POST" enctype="multipart/form-data" ng-submit="vm.addPartner()">
    <div class="form-group">
        <label for="name">Nazwa Partnera</label>
        <input class="form-control" type="text" id="name" name="name" ng-model="vm.newPartner.name" required/>
        <span ng-show="newPartnerForm.name.$error.required" class="text-warning">To pole jest wymagane</span>
    </div>

    <div class="form-group">
        <label for="files">Ścieżka</label>
        <input type="file" id="uploader" name="files[]" class="btn btn-primary" accept="image/*" ng-model="files" ngf-multiple="false">
        <button ng-click="add()">Add</button>
    </div>

    <div class="form-group">
        <label for="href">Link do strony partnera</label>
        <input class="form-control" type="text" id="href" name="href" ng-model="vm.newPartner.href"/>
    </div>
    <div class="form-group">
        <input type="submit" value="Add"
               class="btn btn-success btn-sm"
               ng-disabled="newPartnerForm.$invalid" />
    </div>
</form>


<table class="table table-responsive table-striped">
    <tr ng-repeat="partner in vm.partners">
        <td> {{partner.name}}</td>
        <td> {{partner.href}}</td>
        <td><a ng-href="#/editor/{{ patner.name }}" class="btn btn-sm btn-primary">Manage</a></td>
        <td><input type="button" ng-click="vm.removePartner(partner.name)" value="Usuń" class="btn btn-sm btn-danger"/></td>
    </tr>
</table>

HTML文件:

isPositive

从表单传递似乎正在起作用,因为每当我选择文件时警报都会被触发。

0 个答案:

没有答案