Отправьте файл на сервер, используя ax ios в приложении реакции - PullRequest
Новая
       5

Отправьте файл на сервер, используя ax ios в приложении реакции

0 голосов
/ 28 мая 2020

Я использую ax ios в React, чтобы попытаться отправить файл на сервер. Может кто-нибудь, пожалуйста, покажите мне, что я здесь делаю не так. Ошибки нет. Переменная form возвращает пустой объект. Я в полном тупике.

Путь: React submit call

handleSubmit(event) {
  event.preventDefault();
  this.props.uploadProducts(supplier_id, this.fileInput.current.files[0]);
}

Путь: uploadProducts

export const uploadProducts = (supplier_id, file) => (dispatch, getState) => {
  const form = new FormData();

  form.append('my_field', 'my value');
  form.append('my_file', file);
  console.log(form);

  axios
    .post('http://localhost:3000/products', form, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
};

Путь: Server

router.post('/products', async function (req, res, next) {
  console.log('res', req.body);
});

1 Ответ

0 голосов
/ 28 мая 2020

API-интерфейс FormData не будет возвращать ваши значения путем непосредственного протоколирования консоли. У него есть несколько вспомогательных функций, а некоторые из них - итераторы для извлечения его значений. проверьте больше: formData MDN

ваш топор ios сообщение, похоже, не соответствует конечной точке вашего маршрутизатора. ax ios также является библиотекой обещаний, поэтому вы используете then и catch для обработки действий разрешения и отклонения. 

  axios
    .post('http://localhost:3000/upload/supplier/products', form, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(res => console.log(res))
    .catch(err => console.log(err))

если вы определяете свою функцию как async, вы можете использовать await и заключить в блок try catch: 

 try {
   const response = await axios
    .post('http://localhost:3000/upload/supplier/products', form, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
   console.log(response)
  } catch (e) {
    console.log(e) 
  }
...