Ember.js 和图片上传

Question

我在 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 对图像进行编码，但我不知道该怎么做，因为我以前从未这样做过。

在视图中，这就是我尝试获取图像的方式（我知道这不是我应该做的，但我不知道该怎么做）：

<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>

有什么想法、建议、帮助吗？

编辑：

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);
    });
  }
}

Answer 1

利用 ember-file-upload 插件。该插件负责将它们编码为 Base64 数据 url。在您的情况下，请按照以下步骤操作，

hbs form page:

<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>

hbs view page:

<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>

js:

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);
      });
    }
  }
});

您可以参考整个文档here

Answer 2

替换

{{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}} />

这将在选择图像时触发 uploadFile 操作。在您的 js 文件中，将操作添加为 ,

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);
    }
  }
}

来源：

Ember.js 和图片上传

Ember.js and image uploading

ember.js

ember-data

ember-cli