编码 "UTF8" 的无效字节序列：当我尝试 post 并将带有 FormData 对象的图像发送到服务器时出现 0x00 响应

Question

我想做的只是通过发送新信息来更新用户的个人资料。当我在不发送新图像的情况下执行此操作时，它工作正常，但是一旦我将新图像附加到我的 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", {…}]

我的 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: ƒ ()

此问题与我的 FormData 或服务器端有关吗？

Answer 1

所以我找到了一个非常简单的解决方案。当您使用 react-native-image-picker 从图库中获取图像时，您将获得一个带有几个键的对象作为响应。 IOS 和 Android 有一个不同的 'uri' 键。对于 IOS 你来说，它看起来像这样：

'file:///...'

您所要做的就是删除 'file://'，现在我会这样附加我的图片：

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

在此 article 您可以找到更多相关信息。

编码 "UTF8" 的无效字节序列：当我尝试 post 并将带有 FormData 对象的图像发送到服务器时出现 0x00 响应

invalid byte sequence for encoding "UTF8": 0x00 response when i try to post and image with FormData object to the server

encoding

fetch

multipartform-data

form-data