5

Возникла проблема при сохранение файла на сервере. Есть vue компонент:

<form @submit.prevent="addNews" enctype="multipart/form-data">
    <input ref="image" type="file" @change="processFile">
    ...
</form>

methods: {
    processFile(event) {
        this.img = event.target.files[0];
        console.log(this.img); // В консоли картинка распознаётся со всеми параметрами как надо
    },
    addNews() {
        axios.post('/news/create', {
            title: this.title,
            img: this.img, // Здесь уходит пустой массив? O_o (подсмотрел в консоли)
            description: this.description,
            article: this.article,
        })
            .then((response) => {
                console.log(response);
            })
    }

Всё приходит на сервер кроме картинки (приходит пустой массив вместо него). В чем может быть проблема?

Увидел что используют такую конструкцию:

let form = new FormData();
form.append('img', this.img);

Стоит ли переделывать всё под эту конструкцию? (проверил - работает)

let form = new FormData();
form.append('title', this.title);
form.append('description', this.description);
form.append('article', this.article);
form.append('img', this.img);

axios.post('/news/create', form)

Или же есть более простой способ в решении моей проблемы?

Зачем создавать новую форму и передавать параметры из старой формы? Возможно необходимы дополнительные параметры для формы?

3
  • Несколько я знаю FormData() это самый адекватный спосок отправить бинарные данные(картинку или фаил) на сервер, с помощью Ajax. 4 янв 2019 в 9:23
  • @ДмитрийМирошниченко, а почему нужно передавать параметры из одной формы в другую? 4 янв 2019 в 18:05
  • В данном случае это не новая форма, а экземпляр данных из формы. FormData сама умеет данные извлекать из формы, для этого нужно в конструктор передать выборку с элементом формы. Если у Вас в форме все значения и именная полей Вам подходят можете так и поступить. 4 янв 2019 в 22:02

1 ответ 1

0

При создании объекта FormData, передайте в качестве аргумента объект существующей формы.

let form = new FormData(this);
axios.post('/news/create', form);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.