Как загрузить файл с ReactJS и Axios - PullRequest
Новая
       6

Как загрузить файл с ReactJS и Axios

2 голосов
/ 25 января 2020

Использование react-bootstrap формы для публикации файла и некоторых данных: 

<Form
    onSubmit={this.handleSubmit}
>
    <Form.Group controlId="newTeacher.name">
        <Form.Label>Teacher Name</Form.Label>
        <Form.Control
            type="text"
            name="name"
        />
    </Form.Group>
    <Form.Group controlId="newTeacher.description">
        <Form.Label>Description</Form.Label>
        <Form.Control
            as="textarea"
            rows="3"
            name="description"
            placeholder="Description"
        />
    </Form.Group>
    <Form.Group controlId="newTeacher.avatar">
        <Form.Label>Avatar</Form.Label>
        <Form.Control
            type="file"
            name="avatar"
        />
    </Form.Group>
    <Button
        variant="primary"
        type="submit"
    >Save Teacher</Button>
</Form>

Когда я пытаюсь отправить данные с Ax ios на сервер: 

handleSubmit = (e) => {
    if (e && e.preventDefault()) e.preventDefault();

    const formData = new FormData(e.target);

    const name = formData.get('name');
    const content = formData.get('description');
    const avatar = formData.get('avatar');

    const requestBody = {
        name,
        content,
        avatar,
        token: cookie.getItem('token'),
    };

    axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
        {
            mode: 'cors',
            headers: 'multipart/form-data'
        }
    ).then(response => {
        console.log('response:');
        console.log(response);
    }).catch(error => {
        console.log('reject:');
        console.log(error);
    });
};

Когда я отправляю форма, это то, что возвращается в консоли (Это сообщение об отказе от Ax ios.):

reject: TypeError: "name.toUpperCase не функция "

Как это исправить?

Обновление: Этот скрипт не работает должным образом. Я обновлю это для тех, у кого есть эта проблема.

Данные должны быть append: 

const requestBody = new FormData();
requestBody.append("avatar", avatar);
requestBody.append("name", name);
requestBody.append("content", content);

И multipart/form-data не требуется. В некоторых случаях возникают проблемы с Multer. Также токен должен быть в шапке: 

axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
    {
        mode: 'cors',
        headers: {
            'x-access-token': cookie.getItem('token'),
        }
    }
).then(response => {
    // SOME ACTION.
})

1 Ответ

3 голосов
/ 25 января 2020

Axios ожидание заголовков как объекта, поэтому передайте заголовки как объект.

Пример 

 axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
      {
            mode: 'cors',
            headers: { 'Content-Type':  'multipart/form-data' }
      }
 ).then(response => {
     //...
 });
...