Ember.js和图像上传

在Ember.js中上载图像时遇到问题

我有一个创建用户的表单：

<div class="container">
<form onsubmit={{action "createUser"}} enctype="multipart/form-data">
  <div class="form-group">
    <label for="firstName">First name: </label>
    {{input type="text" class="form-control" id="firstName" required="true" value=firstName}}
  </div>
  <div class="form-group">
    <label for="lastName">Last name: </label>
    {{input type="text" class="form-control" id="lastName"  required="true" value=lastName}}
  </div>
  <div class="form-group">
    <label for="age">Age: </label>
    {{input type="number" class="form-control" id="age"  required="true" value=age}}
  </div>
  <div class="form-group">
    <label for="job">Job: </label> 
    {{input type="text" class="form-control" id="job"  required="true" value=job}}
  </div>
  <div class="form-group">
    <label for="image">Picture: </label> 
    {{input type="file" class="form-control" id="image" value=image}}
  </div>
  <button type="submit" class="btn btn-info">Create</button>
</form>

利用插件。插件会将它们编码为Base64数据url。在您的情况下，请遵循以下步骤

哈佛商学院表格页：

js:

您可以参考整个文档

替换

{{input type="file" class="form-control" id="image" value=image}}

与

---

来源：

您可以显示createUser操作吗？您的后端如何期望您的图像？我在原始帖子中添加了我的createUser操作。实际上，我没有后端，我正在使用mirage，我不需要保存我创建的数据。mirage只用于测试。如果你最终不保存你所创建的东西，那就没用了，对吧？虽然海市蜃楼很有用，但您仍然需要了解实际后端应该如何工作。对于图像，我通常只在模型中放置一个URI。您提到了base64，但没有详细说明。你能解释一下你来base64的原因吗？那只是个练习，我不需要后端，所以。。。但如果我不得不这么做，你会建议用什么？基本上，有人向我解释说，我应该对我的图像进行编码，并将结果放入字符串中，这就是我遇到的问题。谢谢你的帮助：我在尝试创建新用户时收到此错误消息。未捕获的类型错误：file.upload不是一个函数，知道为什么吗？请确保这一点。设置'avatarFile'，file；行出现在setAvatar操作中？请遵循此文档http://adopted-ember-addons.github.io/ember-file-upload/docs/integrationStill 同样的错误，即使在读了30次文件后，哈哈。我真的搞不懂！谢谢你的邀请哇，太谢谢你了！这完全有效，谢谢你的帮助！

actions: {
  createUser(event) {
    event.preventDefault();
    let user = this.store.createRecord('user', {
      firstName: this.firstName,
      lastName: this.lastName,
      age: this.age,
      job: this.job,
      image: this.image
    });
    user.save().then (() => {
      this.transitionToRoute('user', user.id);
    });
  }
}

<form onsubmit={{action 'createUser'}}>
  <div class="form-group">
    <label for="firstName">First name: </label>
    {{input type="text" class="form-control" id="firstName" required="true" value=firstName}}
  </div>

  ...
  //other input fields
  ...

  {{#file-upload name="avatar"
                 accept="image/*"
                 onfileadd=(action 'setAvatar')}}

    // preview image before uploading
    {{#if avatar}}
      <img src={{avatar}}
      <a id="upload-avatar">Add a photo</a>
    {{else}}
      <a id="upload-avatar">Add a photo</a>
    {{/if}}

  {{/file-upload}}
  <button type="submit">Create</button>
</form>

<div class="container">
  <h1>{{model.firstName}} {{model.lastName}}</h1>
  <p>Age: {{model.age}} years old</p>
  <p>Job: {{model.job}}</p>
  <img src={{model.image}} alt="img" id="image">
</div>

import Controller from '@ember/controller';

export default Controller.extend({
  avatarFile: null,
  actions: {
    createUser(event) {
      event.preventDefault();
      // upload file to backend
      let file = this.get('avatarFile');
      // make a api call to the url `/upload` (modify the url as you wish)
      file.upload('/upload').then((response) => {
        // save user model once the image is been uploaded successfully to the server
        let user = this.store.createRecord('user', {
          firstName: this.firstName,
          ...
          // get the image_url from backend response
          image: response.image_url
        });
        user.save().then((response) => {
          // get the user_id in response
          this.transitionToRoute('user', response.user_id);
        });
      });
    },
    setAvatar(file) {
      this.set('avatarFile', file);

      // Set the URL so we can see a preview
      file.readAsDataURL().then((url) => {
        this.set('avatar', url);
      });
    }
  }
});

{{input type="file" class="form-control" id="image" value=image}}

<input type="file" class="form-control" id="image" onchange={{action "uploadFile"}}/>
<br> Chosen image is <br>
<img src={{image}} />

actions: {
  uploadFile: function(event) {
    var self = this;
    const reader = new FileReader();
    const file = event.target.files[0];
    let imageData;

    reader.onload = function(){
      imageData = reader.result;
      self.set('image', imageData);
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  }
}