AngularJS向后端ASP.NET API控制器上传文件

要实现AngularJS向后端ASP.NET API控制器上传文件，需要遵循以下步骤：

添加HTML表单元素

首先需要添加一个HTML表单元素，用户通过该表单选择要上传的文件。示例代码如下：

<form>
    <div class="form-group">
        <input type="file" name="file" ngf-select ng-model="file" id="file" accept=".jpg,.png,.gif">
    </div>
    <div class="form-group">
        <button ng-click="upload()">Upload</button>
    </div>
</form>

上述代码中，ngf-select指令用于选择文件，ng-model指令用于将选择的文件绑定到控制器的作用域变量file上。accept属性指定只允许选择jpg、png、gif格式的文件。

定义上传函数

接下来需要在控制器中定义上传函数。在该函数中，需要使用$http服务向后端API控制器POST请求提交文件数据。示例代码如下：

app.controller('myCtrl', function ($scope, $http) {
    $scope.upload = function () {
        var file = $scope.file;
        var formData = new FormData();
        formData.append('file', file);
        $http({
            method: 'POST',
            url: '/api/upload/',
            data: formData,
            headers: {'Content-Type': undefined}
        }).then(function (response) {
            console.log(response.data);
        }, function (response) {
            console.log(response.data);
        });
    };
});

上述代码中，$http服务用于发送POST请求。FormData对象用于创建表单数据，通过调用append方法将选择的文件添加到表单中。headers参数中将Content-Type设置为undefined，此时浏览器会自动设置为multipart/form-data，以支持上传文件。

在后端API控制器中接收文件数据

接下来需要在后端API控制器中编写代码来接收文件数据。ASP.NET中可以使用ApiController来简化代码，示例代码如下：

public class UploadController : ApiController
{
    public IHttpActionResult Post()
    {
        var httpRequest = HttpContext.Current.Request;
        foreach (string file in httpRequest.Files)
        {
            var postedFile = httpRequest.Files[file];
            var filePath = HttpContext.Current.Server.MapPath("~/App_Data/" + postedFile.FileName);
            postedFile.SaveAs(filePath);
            return Ok("File uploaded successfully!");
        }
        return BadRequest();
    }
}

上述代码中，HttpContext.Current.Request对象用于获取HTTP请求信息。使用Files属性获取提交的文件，然后使用SaveAs方法保存文件。最后使用Ok方法返回成功信息，或者使用BadRequest方法返回错误信息。

测试上传功能

完成上述步骤之后，就可以进行测试了。在网页中选择一个文件，点击上传按钮，应该能够成功上传文件并返回上传成功的信息。

示例代码

下面是AngularJS上传文件的一个完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AngularJS Upload Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-file-upload/12.2.13/ng-file-upload-all.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <form>
        <div class="form-group">
            <input type="file" name="file" ngf-select ng-model="file" id="file" accept=".jpg,.png,.gif">
        </div>
        <div class="form-group">
            <button ng-click="upload()">Upload</button>
        </div>
    </form>
</div>
<script>
    var app = angular.module('myApp', ['ngFileUpload']);
    app.controller('myCtrl', function ($scope, Upload, $http) {
        $scope.upload = function () {
            var file = $scope.file;
            var formData = new FormData();
            formData.append('file', file);
            $http({
                method: 'POST',
                url: '/api/upload/',
                data: formData,
                headers: {'Content-Type': undefined}
            }).then(function (response) {
                console.log(response.data);
            }, function (response) {
                console.log(response.data);
            });
        };
    });
</script>
</body>
</html>

后端ASP.NET API控制器的代码示例：

public class UploadController : ApiController
{
    public IHttpActionResult Post()
    {
        var httpRequest = HttpContext.Current.Request;
        foreach (string file in httpRequest.Files)
        {
            var postedFile = httpRequest.Files[file];
            var filePath = HttpContext.Current.Server.MapPath("~/App_Data/" + postedFile.FileName);
            postedFile.SaveAs(filePath);
            return Ok("File uploaded successfully!");
        }
        return BadRequest();
    }
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AngularJS向后端ASP.NET API控制器上传文件 - Python技术站