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

Question

我正在尝试将图像和 POST 表单数据(尽管理想情况下我希望它是 json)上传到端点在我的 Azure 移动服务应用程序中。

我有 ApiController 方法:

[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]字符串元数据时才起作用，但随后效果很好。

当包含 [FromBody]string 元数据 时(如上所述)，我收到错误:

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

但是，我想POST额外的元数据(可能很长，所以我不想把它放在乌里)。

如何保留文件上传逻辑，以及POST附加字符串数据到我的 Controller ？

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

Answer 1

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

我的前端应用程序正在使用 javascript File API 获取对 FileReader 对象的引用，该对象可以使用 readAsDataURL 方法返回 base64(数据 uri)字符串。它基本上做了这样的事情:

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"
}]
}

Controller 看起来像这样:

[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();
}

那么我有以下型号来支持 Controller :

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;
        }

    }
}