为什么我的模型中的 "Image" 为空？

Question

我正在尝试使用网络 api、angular JS 上传图像和其他类型的数据。我的 POST 员工 API 控制器操作是：

[ResponseType(typeof(Employee))]
public async Task<IHttpActionResult> PostEmployee(Employee employee)
{
    byte[] data = new byte[employee.Image.ContentLength];
    employee.Image.InputStream.Read(data, 0, employee.Image.ContentLength);
    employee.Picture = data;
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    db.Employees.Add(employee);
    await db.SaveChangesAsync();

    return CreatedAtRoute("DefaultApi", new { id = employee.ID }, employee);
}

服务 JavaScript 是：

app.service('Service', function ($http) {
    this.getEmployees = function () {
        return $http.ger("/api/EmployeeApi");
    }

    this.post = function (Employee) {
        var request = $http({
            method: "post",
            url: "/api/EmployeeApi/PostEmployee",
            data: Employee,
            headers: {
                'Content-Type' : 'application/json'
            }
        });
        return request;
    };
});

我用于将员工发布到服务器的 "AddEmployee " 控制器是

app.controller('AddEmployee', function ($scope, Service) {
    $scope.ID = 1;
    $scope.save = function () {
        var Employee = {
            ID: $scope.ID,
            Name: $scope.Name,
            Experience: $scope.Experience,
            EmployerName: $scope.EmployerName,
            Image:$scope.Image
        };
        var Post = Service.post(Employee);
        Post.then(function (pl) {
            alert("Student Saved Successfully.");
        },
        function (errorPl) {
            $scope.error = 'failure loading Student', errorPl;
        });
    };
});

"Image" 属性未发布到服务器。而是抛出空值。可能是绑定问题。我不确定为什么图像属性没有绑定到模型而其他属性可以。

Answer 1

我假设您在 html 中使用带有文件类型的输入来获取文件名。 Angular 不会自动处理这些文件的绑定，因此即使您选择的文件显示在浏览器中，它也不会更新模型。有许多指令可用于解决此缺点。

这个答案涵盖得相当透彻。 ng-model for <input type="file"/>

为什么我的模型中的 "Image" 为空？

why is "Image" in my model null?

image-uploading

asp.net-web-api

angularjs