javascript - 在 Ember.js 中将图像上传到服务器(或 S3)的正确方法是什么？

Question

我有基于 Ember.js (2.13) 构建的应用程序。我有 User 模型，目前我正在研究头像上传功能。当我修改模型并保存它时，Ember 在其期间向我的 API 发出 PATCH 请求 Ember 序列化器构建了漂亮的 json-api 对象，我喜欢它。

当我需要将图像上传到服务器时，我需要使用文件数据向我的 API 发出一些 PUT 请求，我可以使用 jQuery ajax 来实现此目的。服务器将调整大小并裁剪图像并将其保存在磁盘上或将其推送到 S3 存储桶。但我不喜欢这种方式，因为这个请求将绕过 Ember 的序列化器创建，并且不引用模型。因此，我需要将上传的文件名设置为 User 模型并保存，然后我将对服务器产生冗余请求。

我有一个想法，在 Ember.js 应用程序中将文件转换为 base64 字符串，并将该字符串设置为 User 模型并保存。在这种情况下，我将向服务器发出一个请求。这是上传文件的好方法吗？

请建议在 Ember.js 应用程序中上传文件的最佳实践。

Answer 1

But I do not like this way because this request will be created bypassing Ember's serializer and without references to model.

对此您无能为力 - ember 数据不支持文件。在许多情况下 ED 还不够好(例如 - 嵌套资源 URI、部分更新)。我建议不要太担心它 - 如果您无法使用 ember 数据执行某些请求，只需使用 Ember.$.ajax 即可。

So I need to set uploaded filename to User model and save it then I'll have redundant request to server.

不，你不知道。只需配置您的后端以返回完整的用户模型(就像您对使用 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 数据文件上传的支持。我自己没有尝试过，所以不能说它是否有效以及有多好。