Ember.jsのサーバー（またはS3）に画像をアップロードする正しい方法は何ですか？

Question

私はEmber.js (2.13)の上に構築されたアプリケーションを持っています。私はUserモデルを持っており、この時点では私はアバターのアップロード機能に取り組んでいます。私がモデルを変更して保存すると、EmberはのAPIを要求します。Emberシリアライザはniceオブジェクトを作成します。json-apiオブジェクトが好きです。

私はサーバーに画像をアップロードする必要があるときに、ファイルデータを使用してPUTリクエストをAPIに送信する必要があります。これには、jQuery ajaxを使用できます。サーバーは画像のサイズを変更してトリミングし、ディスクに保存するか、S3バケットにプッシュします。しかし、このリクエストは、Emberのシリアライザを迂回して、モデルへの参照なしに作成されるため、私はこの方法が嫌いです。だから私はUserモデルにアップロードされたファイル名を設定し、私はサーバーに冗長な要求を持ってそれを保存する必要があります。

Ember.jsアプリでファイルをbase64文字列に変換し、この文字列をUserというモデルに設定して保存するという考えがあります。この場合、私はサーバーに1回のリクエストをします。これはファイルをアップロードするための良い方法ですか？

Ember.jsアプリケーションでファイルをアップロードすることをおすすめします。

Answer 1

しかし、この要求は、エンバーのシリアライザをバイパス を作成し、モデルへの参照なしになりますので、私はこの方法が好きではありません。

これについては何もできません - エバーデータはファイルをサポートしていません。そして、多くの状況でEDは十分ではありません（例えば、ネストされたリソースURI、部分的な更新）。私はあまり気にしないことをお勧めします。あなたがemberデータを使ってリクエストを実行できない場合は、Ember.$.ajaxを使用してください。

アップロードされたファイル名をユーザーモデルに設定して保存する必要があります。その場合は、 にサーバーへの冗長な要求があります。

いいえ、ありません。完全なユーザーモデルを返すようにバックエンドを構成するだけです（EDを使用する他の取得/ポスト/更新要求の場合と同様に）storeのpushPayloadメソッドに結果（要求が成功した場合はもちろん）を渡します。ストアは追加の要求なしに実際のデータで更新されます。例：

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があります。私は自分でそれを試していないので、それがうまくいくかどうかは言えません。

Answer 2

一般的なemberアドオンを使って試してみることができます。
ember-pluploadとember-uploaderアドオン