Axios FormData с изображением отправляет пустой массив

#vue.js #axios

#vue.js #axios

Вопрос:

У меня есть метод put для моего маршрута профиля в бэкэнде, мне нужна аутентификация токена, поэтому для авторизации я должен передать токен через заголовок, я получаю сообщение об ошибке, потому что по какой-то причине он отправляет пустые FormData, когда я регистрирую запрос в своем бэкэнде.

Я протестировал серверную часть с помощью postman, и все работает так, как задумано, так что это не проблема с серверной частью, в запросе, который я делаю из интерфейса, что-то не так, но я не знаю, как с этим справиться, есть какие-нибудь подсказки?

 profile_update() {
            let params = {
                email: this.profile.email,
                password: this.profile.password,
                coin: this.profile.coin,
                phone_country: this.profile.phone_country,
                phone_area: this.profile.area_code,
                phone_number: this.profile.number,
                first_name: this.profile.first_name,
                last_name: this.profile.last_name,
                date_of_birth: this.profile.date_of_birth,
                gender: this.profile.gender,
                city_id: this.profile.city,
                wants_to_change_password: this.profile.wants_to_change_password,
                state_id: this.profile.state,
                city_id: this.profile.city
            }

            let headers = {
                'Authorization': 'Bearer'   this.token
            }

            let formData = new FormData();
            formData.append('profile-picture', this.profile.profile_picture)
            formData.append('data', params)
            formData.append('headers', headers)
            formData.append('_method', 'PUT')

            axios.put(`http://127.0.0.1:8000/api/profile`, formData, headers).then(res => {
                console.log(res)
            }).catch(e => {
                console.log(e)
            })
        }
  

Ответ №1:

Попробуйте этот способ

 axios.put(`http://127.0.0.1:8000/api/profile`, {'profile-picture':this.profile.profile_picture}, {
  headers: {
    Authorization: 'Bearer '   this.token,
    'content-type': 'multipart/form-data'
  }
}).then(res => {
     console.log(res)
}).catch(e => {
     console.log(e)
})
  

Надеюсь, это может решить вашу проблему. Для получения дополнительной информации читайте документы

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

1. он по-прежнему отправляет пустой массив

2. Попробуйте добавить свойство типа содержимого в заголовок. Я отредактировал ответ, проверьте

3. он все еще пуст

4. итак, я попытался добавить дополнительный параметр со случайным значением, удалив content-type: multipart / form-data он отправляет параметр, но отправляет изображение в виде пустого массива, мне нужно отправить изображение, и кажется, что я не могу использовать formdata для этого, не уверен, что этоэто проблема axios или проблема с сервером

5. неважно, мне пришлось выполнить добавление запроса post formData.append('method', '_PUT') , я совершенно забыл об этом, я делал запрос put напрямую