如何将图像和 POST 数据上传到 Azure 移动服务 ApiController 终结点？

我正在尝试上传图片and POST表单数据（尽管理想情况下我希望它是json）到我的端点Azure 移动服务应用。

我有ApiController method:

[HttpPost]
[Route("api/upload/{databaseId}/{searchingEnabled}/{trackingEnabled}")]
public async Task<IHttpActionResult> Upload(string databaseId, string searchingEnabled, string trackingEnabled, [FromBody]string metadata) {

    if (!Request.Content.IsMimeMultipartContent()) {
        return BadRequest("No image is uploaded.");
    }
    else {
        var provider = new MultipartMemoryStreamProvider();
        await Request.Content.ReadAsMultipartAsync(provider);
        foreach (var file in provider.Contents) {
             // Process each image uploaded
        }
    }
}

这仅在我删除时才有效[FromBody]string metadata，但效果很好。

When [FromBody]string metadata包含（如上所述），我收到错误：

The request entity's media type 'multipart/form-data' is not supported for this resource.

However， 我想POST额外的metadata（这可能很长，所以我不想把它放在 Uri 中）。

我怎样才能保留文件上传逻辑，以及POST向我的控制器添加额外的字符串数据？

我正在使用 Azure 移动服务，因此此代码位于System.Web.Http.ApiController（如果这很重要的话）。

我之前所做的就是让客户端发布一个 json 模型，其中包含元数据和实际文件。每个文件都是实际文件内容的 Base64 编码字符串。下面的代码应该能够处理数据 uri + base64。

我的前端应用程序正在使用 javascript File API 来获取对FileReader对象可以通过使用返回一个base64（数据uri）字符串readAsDataURL方法。它基本上是在做这样的事情：

var attachment = {};

function loadAttachmentFromFileInput(element) {
    var file = element.files[0];

    var reader = new FileReader();

    reader.onload = function(e) {
        var result = reader.result;

        attachment = {
            data: result,
            filename: file.name,
            type: file.type,
            size: file.size
            }
    }

    reader.readAsDataURL(file);    
}

然后我正在构建一个POST模型会产生以下 json 内容：

{
  "messageId": 1,
  "foo": "bar",
  "bar": "foo",
  "attachments": [{
    "filename": "stackoverflow.jpg",
    "data": "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAaABQDAREAAhEBAxEB/8QAmQABAAIDAAAAAAAAAAAAAAAACQUIBgcKAQABBQEBAAAAAAAAAAAAAAAIAAEEBgcFAxAAAAUCAwUFAg8AAAAAAAAAAgMEBQYBBxEUCAASFRYXIRM1NhgiJDFBU2NkJbXFN0iIGTlJmREAAQIEBAQEAwkBAAAAAAAAAQIDERMEBQASFAYhMUEVIhYHFzIjJPBRwZJDNEQ1Jhj/2gAMAwEAAhEDEQA/AO/UwwsoAjDRgLLD2iGYKgABpjhiIQq0pTtrsylJQnMsgJHU8BhwCowSCTg7L3z6TXPenazKFQ/afNS1v5eO5Wmw96kAq28vslimYoiSjcEA07JJmmTNSo9G9R9VSq9pzAFIAmVJqMIt7z3rc903d/08cS/tj1WoK1dbYy88VUV3bplEIg6iW05PaUQ/RLM1iYFCcGn0pLH042tZ9mW5j1CqU0u6vR+6UAt+4AywNdZlVOXOoNrzPU7tO6lDtJXNkM1MtTKiiYEnMfXLB/Tp1g4G5dSeN9K+hGIeffUR3/B+j2QxzGf497WZ3NzhPvuHd9m1q9+9v+23nGX/AKjUdv7Zm+o7zGX27LCZnndZeeT8yVm+Xjgf827j92fIWpZ8oabuXef4XYoTe65/hySeEuMdT9PHNxxsXUHMo092tq3As9KNTttp44L4jN2i0y5gezm9lShWhc15pXMrIpdKIXhtokGQ3KKrSVPxBqAWF+9RtK/t5doulmrL3ZK0yalmny50tEFRWQXWlkBQTCUqYDAp5YxfZqqmmvCLnb7lT2y60sHGHXY5S4DAJBCFpBgSfGMpEQeeDTUHRWVr45YtguY+zCMvsmb0TBp01oNNwbUX4t46phgEQ/aedQDpHuYD5NFk5ZihC3ruLjOJTDIAsAWZWlRWuW3bbuBTGyaW5PXGwuVYLVrv6KmjulA6JhS/Z7qtsOh5lSkBtlye3pm1spK0uFKiM2/vC47aqnN5JpEW6+t06ptdaAxVW6taUPHT3W155K2H/gdW3KAUsOFvMkEJD0ms10j4pzvHOJ5HNeqHctrzxzvwDpx1Q564Ly/z3kfq7PbneYe7449mxN+11m8udomL8ySv7WVT9x1MjT62dK/dSvBNhMycM+bxYx33b3B5k7nkHlSZl7NPq+16PU6vt0nUZtFP+ZJz5c/jhHBYWjhUglWkOxCWC2euRdFUwXa1cKVx1pNULbpiXQZSvv1LBJqvNFL8yFzWshAMwwkNQHhQ1JEKtA1PpWt+utpprqtBqXH21NcUltxbZ4gRjkIjy4RjDpjObfc37bnkIZWHIRDjaVjhHlmBhz4whHriw1g41qIZLwQFfNYFqkjMCQOLsoflVz9adir2wdsI5ZeyEKl2jpyFfPFoQOBxRZIm5YUeUcMBhgqkgMDWCxt9mnfRUayreDaswQ6oOJJgQDFaSpJEYgpUD0jCOJT97W+wtnS0jZWIZ20FtQEQeSVBJjCECCMV+yKH9irJZNLkeG45TLk5Xc9V/f49xudzu7/t/Bhj27WOP1H2+7HF6YHKXedJx/HD55m3iXiXmx68R+n/AC3zu9t7DkPjw2ID/NTZfnwsPl/S1+XPyH+nb8bfsv7y2j/q9fx5Yfpj/9k=",
    "type": "image/jpeg"
}]
}

控制器看起来像这样：

[Route("api/messages/{messageId:guid}")]
public async Task<IHttpActionResult> Post(Guid messageId, CreateMessageAttachments model)
{
    // Access to all properties in your post model
    Trace.WriteLine(model.Foo);
    Trace.WriteLine(model.Bar);

    foreach (var attachment in model.Attachments)
    {
        // Do what you need to with the bytes from the uploaded attachments
        var bytes = attachment.GetByteArray();
    }

    return Ok();
}

然后我有以下型号来支持控制器：

public class CreateMessageAttachments
{
    public Guid MessageId { get; set; }
    public string Foo { get; set; }
    public string Bar { get; set; }
    public IList<CreateAttachment> Attachments { get; set; }
}

public class CreateAttachment
{
    public string Data { get; set; }
    public string Filename { get; set; }
    public string Type { get; set; }

    public string GetBase64()
    {
        if (string.IsNullOrWhiteSpace(Data))
            return null;

        var index = Data.LastIndexOf("base64");

        if (index == -1)
            return Data;

        return Data.Substring(index + 7);
    }

    public byte[] GetByteArray()
    {
        try
        {
            var base64 = GetBase64();

            if (string.IsNullOrWhiteSpace(base64))
                return null;

            return Convert.FromBase64String(base64);
        }
        catch
        {
            return null;
        }

    }
}