Question

我是Ember.js的新手，我遇到了一个问题，我需要在db中保存上传的图像，但我不知道该怎么做，我编写代码用于上传图像，但我坚持传递它到服务器我的当前代码在下面给出

App.js

App = Ember.Application.create();

App.PreviewImageView = Ember.View.extend({
        attributeBindings: ['name', 'width', 'height', 'src'],
        tagName: 'img',
        viewName: 'previewImageView',
        printme: function () {
            console.log('in previewImageView');
        }
});
App.FileField= Ember.TextField.extend({
    type: 'file',
    attributeBindings: ['name'],
    change: function (evt) {
        var input = evt.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                this.$().parent(':eq(0)').children('img:eq(0)').attr('src', e.target.result);
                var view = that.getPath('parentView.previewImageView');
                view.set('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
});

HTML

<script type="text/x-handlebars">
                {{view App.FileField name="logo_image" contentBinding="content"}}
                {{view App.PreviewImageView width="200" height="100" }}
</script>

Answer 1

假设您正在使用ember-data，您可以创建一个模型来表示图像，然后从阅读器的onload回调中创建/保存。例如：

App.LogoImage = DS.Model.extend({
  id: DS.attr('number'),
  attachment: DS.attr('string')
});

//in App.FileField...
reader.onload = function (e) {
  this.$().parent(':eq(0)').children('img:eq(0)').attr('src', e.target.result);
  var view = that.getPath('parentView.previewImageView');
  view.set('src', e.target.result);
  var file = e.srcElement.result;
  var logo = App.LogoImage.createRecord({ attachment: file });
  logo.save();
}

Answer 2

我认为你可以混合一些传统的MVC方法来解决你的问题。从您当前的代码我可以假设显示图像的预览已完成，以便在服务器端获取该文件只需在您的HTML中使用以下代码

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" {{view Wizard.FileField contentBinding="content"}} />
<input type="submit" id="btnUpload" value="Upload" />
}

并且在您的控制器方法中，您可以像这样访问文件

public ActionResult FileUpload(HttpPostedFileBase file)
{
         // Do what you want
}

要在db中保存映像，你必须将其转换为字节（现在是sql server 2008支持映像，但像postgresql这样的db仍然需要图像作为字节）来使用以下方法

 MemoryStream target = new MemoryStream();
 file.InputStream.CopyTo(target);
 byte[] bytes= target.ToArray();
 return View();

如何使用Ember.js在服务器端上传图像

2 个答案: