从组件内部设置控制器属性

我有一些麻烦让这个工作。我有一个图像上传组件，我想为它设置一个控制器属性，这样我就可以在裁剪组件中使用它，最终将设置一个属性保存到我的后端。

。我渲染图像输入组件，在图像组件内。我有这个设置

{{#if controller.image}}
<img src="{{controller.image}}" width="300">
<br>
{{/if}}
{{ file-input fileChanged="fileSelectionChanged"}}

在file-input。js中有这个

import Ember from 'ember';
export default Ember.TextField.extend({
    type: 'file',
    change: function(e) {
        let self = this;
        var inputFiles = e.target.files;
        if (inputFiles.length < 1) {
            return;
        }
        let inputFile = inputFiles[0];
        let fileInfo = {
            name: inputFile.name,
            type: inputFile.type || 'n/a',
            size: inputFile.size,
            date: inputFile.lastModifiedDate ?
                        inputFile.lastModifiedDate.toLocaleDateString() : 'n/a',
        };
        var fileReader = new FileReader();
        fileReader.onload = function(e) {
            let fileReader = e.target;
            fileInfo.dataUrl = fileReader.result;
            self.sendAction('fileChanged', fileInfo);
        };
        let firstFile = e.target.files[0];
        fileReader.readAsDataURL(firstFile);
    }
});

在image-input。js中有这个

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        fileSelectionChanged: function(file) {
            this.set('controller.image',file.dataUrl);
        },
    },
});

最后在控制器中我是这样设置的

import Ember from 'ember';
export default Ember.Controller.extend({
    formValid: false,
    image: '',
    actions: {
        createFlyer: function() {
            var newFlyer = this.store.createRecord('flyer', {
                firstName: this.get('firstName'),
              lastName: this.get('lastName'),
              location: this.get('location'),
              jobTitle: this.get('jobTitle'),
              companyName: this.get('companyName'),
              timeSpent: this.get('timeSpent'),
              blurb: this.get('blurb'),
              image: this.get('image')
            });
            newFlyer.save();
            this.setProperties({
                firstName: '',
              lastName: '',
              location: '',
              jobTitle: '',
              companyName: '',
              timeSpent: '',
              blurb: '',
            })
        }
    }
});

这是模型

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  location: DS.attr('string'),
  jobTitle: DS.attr('string'),
  companyName: DS.attr('string'),
  timeSpent: DS.attr('string'),
  blurb: DS.attr('string'),
  image: DS.attr('string')
});

当前组件正在控制器上设置文件属性，因为当您浏览和添加图像时，图像标签显示了src属性中正确添加的data: url，因此该属性正在设置，但是当我保存表单时，image属性的内容没有被传递为data: url的内容，它只是空白，就像它看到的默认值。

我没有正确设置属性吗?

我正在使用Ember-cli版本0.2.7

在应用Kingpin的建议之后，当我试图保存到后端时，我现在在控制台得到这个错误。

TypeError: Cannot read property 'match' of null
    at <anonymous>:873:35
    at Array.exports.default.mixin.Mixin.create.find (ember.debug.js:28104)
    at <anonymous>:872:33
    at tryCatch (ember.debug.js:45439)
    at invokeCallback (ember.debug.js:45451)
    at publish (ember.debug.js:45422)
    at ember.debug.js:26472
    at Queue.invoke (ember.debug.js:878)
    at Object.Queue.flush (ember.debug.js:943)
    at Object.DeferredActionQueues.flush (ember.debug.js:748)