Блог

Главная - Вопросы по программированию - недопустимая последовательность байтов для кодирования «UTF8»: ответ 0x00 при попытке отправить сообщение и изображение с объектом FormData на сервер

недопустимая последовательность байтов для кодирования «UTF8»: ответ 0x00 при попытке отправить сообщение и изображение с объектом FormData на сервер

#encoding #fetch #multipartform-data #form-data

Вопрос:

То, что я пытаюсь сделать, — это просто обновить профиль пользователя, отправив новую информацию. Когда я делаю это без отправки нового изображения, это работает нормально, но как только я прикрепляю новое изображение к своему объекту FormData, сервер отвечает этим сообщением:

 message: "invalid byte sequence for encoding "UTF8": 0x00"

Вот мои данные формы:

 const formData = new FormData();
formData.append('firstName', firstName);
formData.append('lastName', lastName);
formData.append('username', username);
formData.append('email', email);
formData.append('phoneNumber', phoneNumber);
formData.append('birthday', birthday);
formData.append('profileImage', profileImage);
dispatch(editProfile(formData, accessToken));

И вот моя функция извлечения:

 function editProfile({formData, accessToken}) {
    console.log(formData, 'hueta');
  const response = fetch('http://3.136.236.84/api/edit-profile/child/', {
    method: 'PUT',
    body: formData,
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-type': 'application/json;charset=utf-8'
    },
  })
    .then(response => {console.log(response); return response.json()})
    .then(data => {
      return data;
    });
  return response;
}

Мои данные формы

 FormData {_parts: Array(7)}
_parts: Array(7)
0: (2) ["firstName", "Update"]
1: (2) ["lastName", "Child"]
2: (2) ["username", "1nspir3d"]
3: (2) ["email", "updatedchild@proton.ch"]
4: (2) ["phoneNumber", " 380981046865"]
5: (2) ["birthday", "28/04/2012"]
6: (2) ["profileImage", {…}]

Мой объект изображения профиля

 fileName: "9A5DDD17-3435-4E51-A048-51447D066708.png"
fileSize: 1388
height: 40
type: "image/png"
uri: "file:///Users/admin/Library/Developer/CoreSimulator/Devices/99D18B6D-9601-4F81-8EA4-9F0FCC287335/data/Containers/Data/Application/F4AFC648-04D3-4CB7-A475-4373C4DB6EB8/tmp/9A5DDD17-3435-4E51-A048-51447D066708.png"
width: 40
get fileName: ƒ ()
set fileName: ƒ ()
get fileSize: ƒ ()
set fileSize: ƒ ()
get height: ƒ ()
set height: ƒ ()
get type: ƒ ()
set type: ƒ ()
get uri: ƒ ()
set uri: ƒ ()
get width: ƒ ()
set width: ƒ ()

Связана ли эта проблема с моими данными формы или со стороной сервера?

Ответ №1:

Поэтому я нашел довольно простое решение. Когда вы получите изображение из своей галереи с помощью react-native-image-picker, вы получите объект с несколькими клавишами в качестве ответа. Существует ключ «uri», который отличается для IOS и Android. И для IOS у вас это выглядит так:

 'file:///...'

Все, что вам нужно сделать, это удалить » файл://», и теперь я добавляю свое изображение вот так:

 formData.append('profileImage', {
  name: profileImage.fileName,
  type: profileImage.type,
  uri: Platform.OS === 'android' ? 
       profileImage.uri :
       profileImage.uri.replace('file://', '')
});

В этой статье вы можете найти более подробную информацию об этом.

Метки: