Каков правильный способ загрузки изображений на сервер (или S3) в Ember.js?

Question

У меня есть приложение, построенное на Ember.js (2.13). У меня есть модель User, и в данный момент я работаю над функцией загрузки аватара. Когда я изменяю модель и сохраняю ее, Ember делает запрос PATCH на мой API во время его создания Ember Сериализатор строит хороший объект json-api, и мне он нравится.

Когда мне нужно загрузить изображение на сервер, мне нужно сделать PUT запрос на мой API с файловыми данными. Для этого я мог бы использовать jQuery ajax. Сервер будет изменять размер и обрезать изображение и сохранять его на диске или нажимать на ковш S3. Но мне это не нравится, потому что этот запрос будет создан в обход сериализатора Ember и без ссылок на модель. Поэтому мне нужно установить загруженное имя файла в User и сохранить его, тогда у меня будет избыточный запрос на сервер.

У меня есть идея преобразовать файл в строку base64 в приложение Ember.js и установить эту строку в User и сохранить ее. В этом случае у меня будет один запрос на сервер. Это хороший способ загрузить файл?

Просьба советоваться с лучшей практикой загрузки файлов в приложении Ember.js.

Answer 1

Но мне это не нравится, потому что этот запрос будет создан в обход сериализатора Ember и без ссылок на модель.

Вы ничего не можете поделать с этим - данные ember не поддерживают файлы. И во многих ситуациях ED недостаточно хорош (например, вложенные URI ресурсов, частичные обновления). Я предлагаю не беспокоиться об этом слишком много - если вы не можете выполнить какой-либо запрос с использованием данных ember, просто используйте Ember.$.ajax.

Поэтому мне нужно установить загруженное имя файла в модель пользователя и сохранить его, тогда я буду иметь избыточный запрос на сервер.

Нет, вы этого не сделаете. Просто настройте свой сервер, чтобы вернуть полную модель пользователя (как и для других запросов на получение/публикацию/обновление, которые используют ED), и передать результат (если запрос был успешным, конечно) до pushPayload метода store. Магазин будет обновляться с фактическими данными без дополнительных запросов. Пример:

this.get('session').authorize('authorizer:token', (headerName, headerValue) => { 
    const headers = {}; 
    headers[headerName] = headerValue; 
    /*Instead of data object, you will create a formData*/ 
    const data = { 
    /*Some data*/ 
    }; 
    Ember.$.ajax(
    { 
     url: '/path-to-resource/id-of-resource', 
     headers, 
     type: "PUT", 
     data 
    } 
) 
    .then(
     (payload) => { 
     this.store.pushPayload(payload); 
     }, 
     (response) => { 
     this.set('errorMessage', stringifyError(response)); 
     } 
    ) 
    .always(() => { 
     this.set('isLoading', false); 
    }); 
}); 

UPD: Существует аддон, ember-cli-form-data, который утверждает, что добавить поддержку загрузки файлов с данными Ember. Я сам не пробовал, поэтому не могу сказать, работает ли он и насколько хорошо.

Answer 2

Вы можете попросить использовать этот адронный аддон для этого.
ember-plupload и ember-uploader addon