Реакция Axios: загрузка нескольких изображений с помощью FormData () - PullRequest
Новая
       35

Реакция Axios: загрузка нескольких изображений с помощью FormData ()

0 голосов
/ 10 июня 2019

Я пытаюсь загрузить файлы на сервер. но это не удается

В основном я хочу загрузить 11 изображений одновременно.

Сначала я делаю это 

    const title, image1, image2, ... = this.state;
    axios.post(`myapi`, {title, image1, image2})

Вот мое состояние изображения 1:

enter image description here

Возвращает ошибку 422 «данные неверны»; «image_1»: поле изображения обязательно для заполнения.

После нескольких чтений в Интернете я обнаружил, что для загрузки и изображения необходимо использовать formData. Поэтому я попытался сделать это 

const title = this.state.title;

const formData = new FormData();
formData.append('image_1', this.state.image_1);
formData.append('image_2', this.state.image_2);
...
axios.post(`myapi`, {title, formData})

Я все еще получаю ту же ошибку 422,

enter image description here

попробовал в console.log форму data 

for (var fd of formData) {
  console.log(fd);
}

результаты показывают, что formData был добавлен хорошо. Но почему-то я не смог загрузить его, потому что это "неверные данные"

enter image description here

Спасибо за помощь!

1 Ответ

0 голосов
/ 10 июня 2019

Вы конвертируете изображения в FormData, но отправляете их как JSON. Вы также должны включить заголовок в formData. 

const formData = new FormData();
formData.append('title', this.state.title);
formData.append('image_1', this.state.image_1);
formData.append('image_2', this.state.image_2);

и отправить данные с заголовком как multipart/form-data

axios.post(`https://api.cashless.vip/api/homepage`, formData, {headers: {"Content-type": "multipart/form-data"}});

Надеюсь, это сработает.

...