alexandrknyazev13071995
@alexandrknyazev13071995

Какое значение из input type=file передавать на сервер?

Работаю с компонентом https://github.com/greena13/react-simple-file-input.
Мне нужно передать загруженный в форму файл на сервер. Событие onload компонента получает два аргумента - event и File.
Если посмотреть на объект event - в нем есть строка, которая представляет из себя наш закодированный файл:
5a141c808bbf2704141503.png
А объект File содержит различную информацию о нашем файле. Мы может также получить этот объект, если повесим обработчик на onChange.
5a141c9a079bb741926844.png
Вопрос: что мне следует записывать в value этого инпута, т.е. что в результате должно передаваться на сервер в качестве файла?
  • Вопрос задан
  • 559 просмотров
Решения вопроса 1
@davidnum95
File и записывай.
Action отправки файла (для thunk):
function uploadFile(file) {
  return () => {
    const data = new FormData();
    data.append('file', file);
    return api.post('url', data);
  };
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
askhat
@askhat
SDE @ Akvelon
File это специальный тип Blob ~ MDN

Вы можете использовать объект File в качестве аргумента метода #sendXMLHttpRequest, чтобы отправить его в теле POST запроса. Например:
function eventHandler (event) {
  const file = event.files[0];
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/someroute', true)
  xhr.onreadystatechange = function () {
    if (xhr.status === 200) {
      console.log(xhr.reponseText);
    }
  }
}
xhr.send(file);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы