Question

我尝试使用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中POST的对象，这对我来说是不寻常的行为。那么如何将文件传递给Web API，以及任何可以通过此form-data测试的格式？

Answer 1

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

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

根据我的理解，通过简单的方式，您可以使用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中的使用示例进行操作。

此外，您需要更改_supportedMimeTypes中的AzureStorageMultipartFormDataStreamProvider.cs MiME Types，如下所示：

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

另外，有一个case谈论Http文件上传的工作原理，你可以参考它。

通过Web Api将文件上传到Azure会引发不支持的媒体类型异常？

1 个答案: