Question

我的html页面上有这个

<div class="form-group col-xs-7 col-lg-6">
    <label>Background image</label>
    <input type="file" name="background_image" id="background_image" ng-model="selectedLayout.background_image" class="form-control" />
    <button class="btn btn-primary" ng-click="save(selectedLayout)">Change background image</button>
</div>

这就是我在控制器中的含义

$scope.save = function (selectedLayout) {
    $http({
        method: 'POST',
        url: 'api/LayoutSettings/PostImage',
        data: selectedLayout.background_image,
        headers: {
            'Content-Type':'image/jpeg'
        }
    });
};

这是我在api控制器中名为LayoutSettings

的方法

public async Task<HttpResponseMessage> PostImage()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    var root = HttpContext.Current.Server.MapPath("~/App_Data");
    var provider = new MultipartFormDataStreamProvider(root);

    try
    {
        await Request.Content.ReadAsMultipartAsync(provider);
        return Request.CreateResponse(HttpStatusCode.OK);
    }
    catch (Exception e)
    {
        return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
    }
}

我不知道为什么当我实际按下更改背景图片时，我发送一个空对象。有人知道如何在那里实际传递图像？感谢。

Answer 1

输入[文件]类型不支持

ng-model，Angular文档中有一个关于它的注释：

注意：并非所有提供的功能都适用于所有输入类型。具体来说，通过ng-model进行数据绑定和事件处理不支持输入[文件]。

请尝试this。

使用angularjs将图像发送到api控制器

1 个答案: