相关疑难解决方法(0)

有人可以使用EmberJS和Ember Data提供有关使用文件字段实现表单的代码示例或文档吗？

我已经熟悉Ember Data,但我不确定如何正确实现文件上传.

我与文件上传一起使用Ember-data并不远.但我没有得到正确的价值绑定.下面是相关代码.

这是App.js

App.LandcodeNewRoute = Ember.Route.extend({
    model: function () {
        return this.store.createRecord('landcode');
    },
    actions: {
        saveLandcode: function () {
            this.currentModel.save();
        }
    }
});


// REST & Model
App.ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: 'api'
});
App.Store = DS.Store.extend({
    adapter: 'App.ApplicationAdapter'
});

App.Landcode = DS.Model.extend({
    code: DS.attr('string'),
    image: DS.attr('string')
});

// Views
App.UploadFile = Ember.TextField.extend({
    tagName: 'input',
    attributeBindings: ['name'],
    type: 'file',
    change: function (e) {
        var reader, that;
        that = this;
        reader = new FileReader();
        reader.onload = function (e) {
            var fileToUpload = e.target.result; …

我写了一个Ember组件,它代表一个可以处理文件上传的样式输入字段.为了达到这个目的,我使用了a <div>和a <input>.在<input>有visibility: hidden一次的单击事件<div>被激发我火上无形的单击事件<input>在灰烬组件的动作处理.

我的问题是,在选择文件后,操作永远不会到达我的Ember组件.

附加文档input.hbs

<div {{action "add"}} class="floating-button">
    <span>+</span>
</div>
{{input multiple="true" action="upload" on="change" accept="image/png,image/jpeg,application/pdf" type="file"}}

附加文档input.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        upload() {
            console.log('This never happens');
        },
        add() {
            Ember.$("input[type='file']").click();
        }
    }
});

我想这与我触发动作中的click事件有关.这样第二次动作在视图中发生时就不会到达组件.

Ember版本:2.7.0