通过 Web Api 将文件上传到 Azure 会引发 Unsupported Media type 异常？答案

【问题标题】：Uploading files to Azure via web Api throws Unsupported Media type exception?通过 Web Api 将文件上传到 Azure 会引发 Unsupported Media type 异常？
【发布时间】：2017-02-21 14:47:46
【问题描述】：

我正在尝试使用 Web Api 和 Angular 通过浏览器将文件上传到 azure，我遵循了以下示例： https://ppolyzos.com/2016/02/07/upload-a-file-to-azure-blob-storage-using-web-api/

我从角度服务发送请求（不确定这是否是正确的实现！）：

this.PostFiles = function (files) {
    var req = $http.post('/api/GENAccounts/UploadFile', files);
    return req;
}

files 是用户选择的文件数组

<input type="file" ngf-select="uploadFiles($files, $invalidFiles)" multiple accept="image/*" ngf-max-height="1000" ngf-max-size="3MB" />

我什至通过 Postman 传递简单字符串来遵循文章中描述的相同测试，但它仍然抛出相同的错误，并且该语句始终返回 true

if (!Request.Content.IsMimeMultipartContent("form-data"))
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

在他的实现中，他没有定义在 web api 中发布的对象，这对我来说是不寻常的行为。那么如何将文件传递给 Web API，以及任何可以通过 form-data 测试的格式？

【问题讨论】：

这个问题你解决了吗，有更新吗？

标签： angularjs azure asp.net-web-api azure-blob-storage

【解决方案1】：

根据您的描述，我已经按照您提供的代码示例来构建我的 Web API，我可以让它按我的预期工作。使用Postman进行测试时，需要将content-type设置为form-data，将data type设置为file，如下：

根据您的 JavaScript 代码，您正在使用 $http.post 上传文件，而 Request.Content.IsMimeMultipartContent 在您的 Web API 后端接收指定的内容 multipart/form-data。

根据我的理解，对于一个简单的方法，您可以利用Upload.upload() 为multipart/form-data 上传跨浏览器，如下所示：

HTML

<body ng-app="fileUpload" ng-controller="MyCtrl">
    <input type="file" ngf-select="uploadFiles($files)" ngf-multiple="true" ng-model="files" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-height="1000" ngf-max-size="3MB"/>
</body>

javascript

var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', function ($scope, Upload) {
    $scope.uploadFiles = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                Upload.upload({
                    url: '/api/GENAccounts/UploadFile',
                    data: { file: file }
                }).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);
                });
            }
        }
    };
});

注意：更多详细示例，您可以关注ng-file-upload的使用示例。

另外，您需要更改AzureStorageMultipartFormDataStreamProvider.cs内的_supportedMimeTypesMiME Types，如下所示：

private readonly string[] _supportedMimeTypes = { "image/png", "image/jpeg", "image/jpg" };

另外还有一个case讲Http文件上传是如何工作的，你可以参考一下。

【讨论】：