Ember.js и загрузка изображений - PullRequest
Новая
       32

Ember.js и загрузка изображений

0 голосов
/ 29 марта 2019

У меня проблемы с загрузкой изображений в 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);
    });
  }
}

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Заменить 

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

Источник: https://stackoverflow.com/a/40370830/2824131

1 голос
/ 01 апреля 2019

Используйте ember-file-upload addon.Аддон заботится о кодировании их как 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);
      });
    }
  }
});

Вы можете обратиться ко всей документации здесь

...