我正在尝试使用angularjs和Asp.Net Core将文件上传到服务器。我试图从窗体传递文件作为视图模型的属性,但它一直作为null来到服务器。它通过了模型验证,但是来自客户端的数据中没有文件。你能告诉我我做错了什么吗?或者这可能不是发布文件的有效方式?提前谢谢。
C#代码:
[HttpPost("")]
public async Task<IActionResult> Post([FromBody]PartnersViewModel thePartner)
{
if (ModelState.IsValid)
{
var file = thePartner.file;
var parsedContentDisposition =
ContentDispositionHeaderValue.Parse(file.ContentDisposition);
var filename = Path.Combine(_environment.WebRootPath,
"Uploads", parsedContentDisposition.FileName.Trim('"'));
using (var stream = System.IO.File.OpenWrite(filename))
{
await file.CopyToAsync(stream);
}
//Save to the Database
var newPartner = Mapper.Map<Partners>(thePartner);
_repository.AddPartner(newPartner);
if(await _repository.SaveChangesAsync())
{
return Created($"api/partners/{thePartner.Name}", Mapper.Map<PartnersViewModel>(newPartner));
}
else
{
return BadRequest("Failed to save to the database");
}
}
return BadRequest(ModelState);
}
视图模型:
public class PartnersViewModel
{
[Required]
public string Name { get; set; }
public string Href { get; set; }
public IFormFile file { get; set; }
}
Angular post方法:
vm.addPartner = function () {
vm.isBusy = true;
vm.errorMessage = "";
$http.post("/api/partners", vm.newPartner)
.then(function (response) {
//success
console.log(response);
vm.partners.push(response.data);
vm.newPartner = {};
}, function () {
//failure
vm.errorMessage = "Failed to add new Partner";
})
.finally(function () {
vm.isBusy = false;
});
};
HTML表单:
<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" 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="file">Ścieżka</label>
<input type="file" id="uploader" name="file" class="btn btn-primary" accept="image/*" ng-model="vm.newPartner.file" ngf-multiple="false">
</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>