Редактировать и отправить обратно файл изображения

Я создаю интерфейс переднего плана для процесса редактирования изображения на заднем плане (не знаю всего правильного жаргона).

В принципе:

  • пользователь должен иметь возможность загружать файл изображения через пользовательский интерфейс
  • который отправляет его на сервер
  • где изображение редактируется каким-то образом
  • тогда пользовательский интерфейс должен отображать отредактированное изображение

Я использую запрос XHR с POST метод, как показано ниже, чтобы отправить файл изображения на сервер.

var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');

uploadButton.onclick = function() {
  
  this.innerHTML = 'Uploading...';
  
  //---------------
  var files = fileSelect.files
  var formData = new FormData();
  var file = files[0]
  
  if (file.type.match('image.*')) {
      formData.append('photos[]', file, file.name);
  }
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://httpbin.org/post', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      uploadButton.innerHTML = 'Upload';
    }
    else {
      alert('An error occurred!');
    }
  };
  xhr.send(formData);
}; //end on-click 'Upload'
<input type="file" id="file-select" name="photos[]"/>

<button type="submit" id="upload-button">Upload</button>

Мой вопрос: как правило, после отправки файла изображения на сервер с помощью приведенного выше кода, когда / как отредактированное изображение отправляется обратно?

  • Будет ли оно отправлено обратно как часть ответа сервера на мой POST запрос, и, следовательно, доступны в моем processRequest функция обратного вызова (при условии, что сервер настроен на такую ​​обработку)?
  • Должен ли я отправить GET запросить получение отредактированного файла?

У меня нет доступа к серверу / бэкэнду в данный момент, и я просто знаю, как должен работать пользовательский интерфейс.

0 ответов

Другие вопросы по тегам