Загрузить фото с помощью Ember addon ember-plupload

Question

Я использовал ember-plupload для загрузки изображений. Теперь я написал для этого компонент. Я могу открывать и выбирать изображения со своего компьютера. Но я потерян, что делать дальше. Я должен отправить запрос на публикацию конечная точка моего сервера с параметрами тела { photo_file: файл изображения}. Мой код следующий.

component.hbs

{{#pl-uploader extensions="jpg jpeg png gif" for="upload-image" onfileadd="uploadImage" as |queue features|}}
  <div class="dropzone" id={{dropzone.id}}>
    <a id="upload-image">Add an Image.</a>
  </div>
{{/pl-uploader}}

component.js

actions:{
        uploadImage:function(file){
        console.log(file)
        let filename = file.get('name');
        file.read().then(function (url) {
         console.log(filename)
         console.log(url)
        }
      }

Я могу получить имя файла и кодировать значение base64. Но не знаю, как отправить запрос на конечную точку сервера.

http://example.com/api/addphoto and it require body with parameter photo_file and choosed file.

Я могу сделать правильный запрос из приложения "Почтальон". В теле запроса я выбираю опцию файла, и он напрямую дает мне возможность выбрать файл оттуда сам. Запрос сделан успешно, и фотография добавляется в конечная точка, когда я выбираю изображение и отправляю запрос

Как мне это сделать в моем приложении?

Answer 1

Вы можете использовать XMLHttpRequest

uploadImage:function(files){
        var file = files[0];
        var request = new XMLHttpRequest();
        request.open('post', "target url", true);
        var formData = new FormData();
        var fieldName = 'file';
        formData.append(fieldName, file);
        request.onreadystatechange = Ember.run.bind(this, function () {
            if (request.readyState === 4 && request.status !== 0) {
               //success
            }
        });

        request.send(formData);
    }