【问题标题】:Can't upload image file from ng-file-upload to web api无法将图像文件从 ng-file-upload 上传到 web api
【发布时间】:2016-05-26 09:22:46
【问题描述】:

我正在使用此指令 (ng--file-upload) 上传图片。
我需要将图像文件包含到 POST 到 ASP.NET Web API 但我没有任何成功。
这是我在服务器上的方法:

public async Task<HttpResponseMessage> SaveData([FromBody]PostModel data)

当我发布数据(从 js 角度)时,所有数据都在这里,除了上传的文件:

$http({
            method: 'POST',
            url: path,
            data: data,
            file: photoFile
        }).then(function...

我也尝试将它放入数据中,但它始终为空。
如何在 web api 上发布和获取图像文件?

我得到的回应是:

"Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'.
 Parameter name: content"

在这一行:

var provider = new MultipartMemoryStreamProvider();
            await Request.Content.ReadAsMultipartAsync(provider);

var data = {            
            "Username": $scope.username,
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        };

        var fd = new FormData();
        fd.append('file', $scope.photoFile);

        $http({
            method: 'POST',
            url: 'path', fd, 
            data: data
        }).the

【问题讨论】:

  • 您可以使用Upload.upload()服务发送文件。阅读文档。

标签: javascript c# angularjs asp.net-web-api ng-file-upload


【解决方案1】:

使用FormData API:

html:

<div class="button" ngf-select="upload($file)">Upload on file select</div>

控制器:

 $scope.upload = function (file) {
    var fd = new FormData();
    fd.append('file', file);

    //Append other data
    //angular.forEach(data,function(v,k){
    //    fd.append(k,v);
    //});

    $http.post('your-upload-url', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .then(function(res){
        // get upload res
    });
};

【讨论】:

  • 但是如何在 Web API 端获取文件?
  • 对不起,我还以为是角度问题……不擅长c#,但你可以查看this
  • 按照您的建议,我通过发送数据更新了问题,您是否知道为什么我从问题中收到错误消息?
  • 一个明显的错误是,fd 就是你认为的data,比如`$http({...,data:fd,..})。
  • 不要把transformRequestheaders放在data里,请参考this
猜你喜欢
  • 2015-12-08
  • 2017-02-27
  • 1970-01-01
  • 2019-02-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-09
  • 2017-01-26
相关资源
最近更新 更多