将数据和文件从Angular发送到Web API
将数据和文件从Angular发送到Web API
提问于 2016-09-09 08:19:34
尝试从AngularJS客户端向MVC Web API发送一些数据和附件(文件)，但不起作用:我可以看到除附加文件之外的所有字段，该字段显示为空
以下是模型：
class Model{
... //the fields
public HttpPostedFileBase Photo { get; set; }//Attachment file, represented as an image
}下面是Web API：
public IHttpActionResult CreateModel([FromBody]Model model)
{
...
}下面是AngularJS代码：
(function () {
angular.module("application")
.controller("homeCtrl", ["$scope", "entityService",
function ($scope, entityService) {
$scope.createModel = function (model)
{
entityService.createModel(model)
.then(function (data) {
console.log(data);
});
};
$scope.model = {
FirstName: "John",
LastName: "Doe"
};
}]);
})();
"use strict";
(function () {
angular.module("application")
.factory("entityService", ["akFileUploaderService", function (akFileUploaderService) {
var createModel = function (model) {
return akFileUploaderService.saveModel(model, "/api/CreateModel");
};
return {
createModel: createModel
};
}]);
})();
(function () {
"use strict"
angular.module("akFileUploader", [])
.factory("akFileUploaderService", ["$q", "$http",
function ($q, $http) {
var saveModel = function (data, url) {
var deferred = $q.defer();
$http({
url: url,
method: "POST",
data: JSON.stringify(data),
transformRequest: angular.identity,
headers: { 'Content-Type': "application/json" }
}).success(function (result) {
deferred.resolve(result);
}).error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
return {
saveModel: saveModel
}
}])
.directive("akFileModel", ["$parse",
function ($parse) {
return {
restrict: "A",
link: function (scope, element, attrs) {
var model = $parse(attrs.akFileModel);
var modelSetter = model.assign;
element.bind("change", function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
})(window, document);这是HTML视图：
....
<div class="form-group">
<label for="attachment">Photo:</label>
<div class="col-md-10">
<input type="file" name="attachment" class="form-control" data-ak-file-model="model.Photo" />
</div>
</div>
<button type="button" ng-disabled="newForm.$invalid" ng-click="createModel(model)" class="btn btn-primary">
Create
</button>回答 1
Stack Overflow用户
发布于 2016-09-12 18:52:09
WebApi (目前)不使用与HttpPostedFileBase相同的机制。将此question answer作为处理文件上传的示例-示例如下(根据答案进行简化)：
public async Task<HttpResponseMessage> AddFile()
{
string root = HttpContext.Current.Server.MapPath("~/temp/uploads");
var provider = new MultipartFormDataStreamProvider(root);
var result = await Request.Content.ReadAsMultipartAsync(provider);
foreach (var key in provider.FormData.AllKeys)
{
foreach (var val in provider.FormData.GetValues(key))
{
if (key == "aFormValue")
{
// do something with form data value
}
}
}
return this.Request.CreateResponse(HttpStatusCode.OK);
}简而言之，您必须读取请求的内容，挑选出文件(有时是表单)部分。您可以在HttpContent上使用内置的MultipartFormDataStreamProvider类和ReadAsMultipartAsync方法来完成此操作。
上面的方法假设你想要保存到磁盘，当你想把文件放到其他地方时，它会变得有点棘手，你必须滚动你自己的MultipartFormDataStreamProvider实现来处理这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39402000
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号