Блог

Главная - Вопросы по программированию - Объект Vue axios FormData преобразует добавленные значения

Объект Vue axios FormData преобразует добавленные значения

#laravel #vue.js #axios #form-data

#laravel #vue.js #axios #форма-данные

Вопрос:

Я использую axios для загрузки нескольких файлов и некоторых других материалов. Среди прочего есть массивы целых чисел (из флажков) и некоторые логические значения.

Сначала я попробовал это:

 axios.post(this.route, {
    name: this.name,
    ...
    photos: this.photos
})

И все было идеально, за исключением того, что серверная часть получала фотографии как пустые объекты.
Итак, я попробовал следующее

 let formData = new FormData()
formData.append('name', this.name)
...
for(let i = 0; i < this.photos.length; i  ) {
     let photo = this.photos[i]

     formData.append('photos[' i ']', photo)
}
axios.post(this.route, formData)

И фотографии работали просто отлично, но другие данные, такие как массивы и логические значения от радиостанций, начали поступать неправильно. FormData преобразует их в strin , и до того, как серверная часть получала их как массивы и логические значения напрямую, я хочу это. Я использую Laravel в качестве серверной части, и проверки не проходят таким образом.

Ответ №1:

Если вы хотите загрузить файлы и другие структурированные данные в формате JSON, то вам нужно будет вручную упорядочить все остальные данные в формате JSON вместе с файлами.

Вот пример:

 const fd = new FormData()

// Include file
fd.append('photo', file)

// Include JSON
fd.append('data', JSON.stringify({
  name: 'Bob',
  age: 20,
  registered: true,
})

axios.post('/users', fd)

На сервере вам также потребуется вручную проанализировать data поле в формате JSON с помощью json_decode (извините, я не знаком с Laravel или PHP).

Комментарии:

1. Это гибридное решение. Как правило, когда сторонний сервер принимает данные формы, он принимает их все в простой стандартной форме без синтаксического анализа из JSON. Вы также должны следовать стандартам, даже если у вас есть доступ как к FE, так и к BE. Запрос должен представлять собой либо данные формы в формате json, а не оба из них.

2. Конечно, вы должны отдавать предпочтение парам данных в форме ключ-значение, но если вы хотите отправлять сложные структурированные данные, которые не могут быть представлены как таковые, то кодирование в формате JSON является хорошим решением.

Ответ №2:

Мне удалось заставить formdata отправлять данные так, как я хочу. Хотелось бы, чтобы был более простой способ, но вот что я сделал.

         let formData = new FormData()
        formData.append('name', this.name)
        formData.append('phone', this.phone)
        formData.append('email', this.email)
        formData.append('house_state', this.house_state)

        // The boolean values were passed as "true" or "false" but now I pass them as "0" or "1" which is strill a string but Laravel recognizes it as an indicator of true or false
        formData.append('has_lived_soon', this.has_lived_soon ? 1 : 0)
        formData.append('can_rent_now', this.can_rent_now ? 1 : 0)

        formData.append('beds_count', this.beds_count)
        formData.append('seasonality', this.seasonality)

        // Here's what I do for the arrays
        for(let extra of this.extras_values) {
            formData.append('extras[]', extra)
        }

        formData.append('estate_issues', this.estate_issues ? 1 : 0)
        formData.append('road_state', this.road_state)
        formData.append('usability', this.usability ? 1 : 0)

        for(let heating_method of this.heating_values) {
            formData.append('heating_methods[]', heating_method)
        }

        formData.append('heating_other', this.heating_other)
        formData.append('address', this.address)

        for(let i = 0; i < this.photos.length; i  ) {
            let photo = this.photos[i]

            formData.append('photos[' i ']', photo)
        }

        axios.post(this.route, formData)
            .then(function(response) {
                console.log(response.data)
            })
            .catch(function(error) {
                app.errors = error.response.data.errors
            })