使用ViewModel将文件传递到asp.net核心中的服务器

时间:2017-09-30 11:42:58

标签: c# asp.net angularjs asp.net-core-mvc

我正在尝试使用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>

0 个答案:

没有答案