Question

我的HTML模板是基本的：

<h1>Upload Photo</h1>

<form {{action "upload" on="submit"}}>
  {{input type="file" id="image"}}
  <button type="submit">Upload</button>
</form>

我在控制器中有这个：

import Ember from 'ember';

export default Ember.Controller.extend({
  firebaseApp: Ember.inject.service(),

  actions: {
    upload() {
      console.log('Uploading photo from controller');
      var storageRef = this.get('firebaseApp').storage().ref();

      // var selectedFile = Ember.$('#image').files[0];
      var selectedFile = document.getElementById('image').files[0];

      console.log('selectedFile = ', selectedFile);

      // var photoRef = storageRef.child('ember-mascot.png');
    }
  }
});

如果我使用正常的javascript方式：

var selectedFile = document.getElementById('image').files[0];

它有效，我得到了该文件的控制台日志。

但是，如果我使用Ember的检索文件的语法：

var selectedFile = Ember.$('#image').files[0];

我收到了一个javascript控制台错误：

TypeError: Cannot read property '0' of undefined

如果我使用：

var selectedFile = this.$('#image').files[0];

我收到此错误：

TypeError: this.$ is not a function

根据Stackoverflow的回答：

this

Ember.$()或this.$()应该有效但不是出于某种原因。

Answer 1

this.$仅在组件中可用。如果你创建组件，一切都将开始工作。

ember g component upload-photo

在upload-photo.js中，

import Ember from 'ember';

export default Ember.Component.extend({
  firebaseApp: Ember.inject.service(),

  actions: {
    upload() {
      console.log('Uploading photo from controller');
      var storageRef = this.get('firebaseApp').storage().ref();

      // var selectedFile = Ember.$('#image').files[0];
      var selectedFile = document.getElementById('image').files[0];

      console.log('selectedFile = ', selectedFile);

      // var photoRef = storageRef.child('ember-mascot.png');
    }
  }
});

并在upload-photo.hbs中

<h1>Upload Photo</h1>

<form {{action "upload" on="submit"}}>
  {{input type="file" id="image"}}
  <button type="submit">Upload</button>
</form>

并将其包含在模板中，如下所示，

{{upload-photo }}

Ember语法通过ID无法获取元素

1 个答案: