在 POST 调用 react native 中传递 base64 字符串

Question

我正在尝试将 expo 的图像选择器返回的 base64 字符串传递给 POST api 调用。以下是代码片段

var { cancelled, uri, base64 } = await ImagePicker.launchCameraAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  base64: true,
});

 const payload = {
    File_String: base64,
  };

let response = await fetch(route, {
  method: "POST",
  headers: {
    Authorization: token,
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(payload),
});

let responseJson = await response.json();

后端api系统已使用.net core开发。 expo 的 imagepicker 返回的 Base64 字符串很长，当使用 fetch 调用发送时，后端没有收到。我从客户端到后端的所有其他调用都正常工作，除了这个，这里唯一的区别是我在有效负载中发送大的 base64 字符串。

我无法弄清楚调用失败的原因以及是否需要对提取调用进行任何特殊设置，即客户端 side/api 端，即后端端，以便发送 n 接收 base64 字符串值？

谁能指导我 reason/error 无法将 base64 字符串从 React Native 发送到 .net Core api？

此致，

Answer 1

方法一：

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAA...AA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=;

并这样使用

<Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>

方法二：

<Image
     source={{
        uri: `data:image/jpeg;base64,${this.state.barcodeImage}`,
     }}
     style={{height: 200, width: 250}}
 />

有关更多信息，请参阅这些类似的 SO Thread1 and 。

Answer 2

使用 axios 而不是 fetch 帮助我解决了我的问题。将 header 中的 maxBodyLength 设置为更大的 int 值有帮助。以下是代码片段：

const route =
    <*your-api-url*>;
  const payload = {
    caption: "This is image",
    imageBase: <*base64String here*>,
  };
  const resp = await axios.post(route, payload, {
    **maxBodyLength: 20000000**,
  });

在 POST 调用 react native 中传递 base64 字符串

pass base64 string in POST call react native

react-native

base64

expo

http-post

fetch-api