[英]How to use HttpPostedFileBase in WebApi Model (Post Action)
Server side code: 服务器端代码:
public class SomeModel
{
public Int64 Id { get; set; }
[Required]
public Int64 From_UserId { get; set; }
public string Text { get; set; }
public List<HttpPostedFileBase> Files {get; set;} //<-- Wonder if this is right way ?
}
Action Method in Controller
[HttpPost]
[Route("Upload")]
public IHttpActionResult Upload( SomeModel model)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
//More code
return Ok();
}
Would angular client code like this work? 像这样的角度客户端代码会工作吗?
$http.post("api/upload",{
Id: 1,
From_UserId: 1,
Text: "First File",
Files: [file1, file2, file3] //<-These are the ones obtained through file type input
})
Additional Info: Using Azure Storage to store files uploaded. 其他信息:使用Azure存储来存储上载的文件。
Here is the great directive for it. 这是它的伟大指令。 ng-file-upload
NG-文件上传
Here is the Demo using Asp.net WebApi . 这是使用Asp.net WebApi的演示 。
JS JS
//inject directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
// upload later on form submit or something similar
$scope.submit = function() {
if ($scope.form.file.$valid && $scope.file) {
$scope.upload($scope.file);
}
};
// upload on file select or drop
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
// for multiple files:
$scope.uploadFiles = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
Upload.upload({..., data: {file: files[i]}, ...})...;
}
// or send them all together for HTML5 browsers:
Upload.upload({..., data: {file: files}, ...})...;
}
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.