如何创建一个区域来删除/选择要在Ember.js上传的图像？

Question

我有一个表单，我将它用于5.2.0数据库的ember模型。 这个模型也应该有一个图像，所以我想创建一个如下所示的区域：

用户应该可以从文件浏览器中拖放文件或使用蓝色按钮选择文件。

另外，我如何实际上传文件以及其他模型属性？

Answer 1

您可以使用EmberDroplet插件并根据需要对其进行自定义（例如，您可以将文件限制设置为1并自定义CSS）。要上传文件，您必须指定url属性，例如：

App.XDropletComponent = Ember.Component.extend(Droplet, {
    url: location.origin + '/upload'
});

在您的API端点（在服务器端），您可以处理数据库中模型的文件上传+设置图像路径（带有图像URL的简单字符串属性，以便您以后在应用程序中使用它）。

然后您可以使用didUpload hook刷新模型（这样您上传后就会返回图片网址。）

Answer 2

或者您可以使用filepicker.io Ember addon。

源代码和用法here。

以下快速参考。

模板：

{{ember-filepicker pickerOptions=pickerOptions
  storeOptions=storeOptions onSelection='fileSelected'
  onClose='onClose' onError='onError'}}

控制器操作：

  fileSelected: function(params){
  //save the params.url to your model
  //the image is stored by filepicker on Amazon S3

},