Как загрузить изображение и данные POST на конечную точку ApiController Azure Mobile Services?

Я пытаюсь загрузить изображение и данные формы POST (хотя в идеале я бы хотел, чтобы оно было json) для конечной точки в моем приложении Azure Mobile Services.

Это работает, когда я удаляю [FromBody]string metadata, но тогда он отлично работает.

Когда [FromBody]string metadata включен (как указано выше), я получаю ошибку:

Однако я хотел бы POST дополнительный metadata (который может быть длинным, поэтому я не хочу помещать его в Uri).

Как я могу сохранить логику загрузки файла, а также POST дополнительные данные строки на мой контроллер?

Я использую Azure Mobile Services, поэтому этот код находится внутри System.Web.Http.ApiController (если это имеет значение).

Ответы

Ответ 1

То, что я делал ранее, - это заставить клиента опубликовать json-модель, которая содержит как метаданные, так и фактические файлы. Каждый файл представляет собой строку с кодировкой base64 фактического содержимого файла. Следующий код должен иметь возможность обрабатывать данные uri + base64.

В моем приложении frontend используется API файлов javascript для получения ссылки на объект FileReader, который может возвращать строку base64 (data 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;
        }

    }
}