Загрузка изображений в Scala Play Framework с угловой загрузкой файлов

Как я сказал в названии, мое дело было отправить изображения. Как и следовало ожидать, я также представляю предварительный просмотр и файлы, сохраненные в настоящее время в базе данных.

Учитывая все плюсы и минусы, я решил отправить все данные в формате JSON в обоих направлениях. Это означает, что изображения кодируются и отправляются в структуре JSON.

Несмотря на то, что вышеупомянутое решение выглядит очень удобно, оно фактически создает новые проблемы во время реализации.

1. Вы быстро превысите ограничение на размер запроса POST-сервера. Для Игрового сервера значение 100 КБ по умолчанию можно расширить, но...
2. Я скоро столкнулся с некоторыми искажениями данных, поскольку изображение, сохраненное как огромная строка байтов, вероятно, имело некоторые ошибки отправки/разбора.

Не углубляясь в это ошибочное решение, я использовал @danial совет:

Нет, если файл отправлен отдельно
{file: file, otherData: JSON.stringify(myData)}

Мое решение

Если кто-то хотел бы использовать подобный подход к моему, я представляю свой ответ. На стороне входа я решил использовать библиотеку ng-file-upload. Связывание его с компонентом HTML с помощью ngf-select с ngf-drop который позволяет компоненту:

<div ngf-drop ngf-select
     ng-model="image"
     ngf-accept="'image/*'"
     ngf-resize="{width: {{width}}, height: {{height}}, quality: 1.0, restoreExif: false}">

    <img ng-show="!!image && !!image.$ngfName" ngf-src="image">

    <img ng-show="(!image || !image.$ngfName)" ng-src="{{ imageUrl }}">
</div>

Внутри тега загрузки я помещаю предварительный просмотр изображения. Это работает безупречно. Если изображение не выбрано, я использую изображение, сохраненное в db.

Данные и изображения больше не разделяют модель. Функция загрузки выглядит следующим образом:

return Upload.upload({
    url: url,
    data: {file: images, data: angular.toJson(data)}
}).then(function (resp) {
    console.log(resp);
}, function (error) {
    console.log(error);
});

Соединяя все вышеизложенное, я дал выходной объект данных:

{  
   "english":{  
      "active":true,
      "url":"http://google.com"
   },
   "arabic":{  
      "active":true,
      "url":"http://google.com"
   },
   "kurdish":{  
      "active":true,
      "url":"http://google.com"
   }
}

На стороне сервера JSON соответствует подготовленному классу case и анализируется встроенным парсером Jackson, что позволяет легко манипулировать объектами. Изображение должно быть выбрано вручную:

val json = r.body.dataParts("data")
val jsValue = Json.parse(json.head)
val result = jsValue.validate(LocalizedBanner.dataModelFormat) // parse JSON

Извлечение файлов из тела может быть выполнено с помощью функции .file:

val key = s"file[${lang.name}][${imageType.name}]"
body.file(key).map(mp => (mp.ref.file, imageType))

Наслаждайтесь!