在 POST 调用中传递 base64 字符串反应原生答案

【问题标题】：pass base64 string in POST call react native在 POST 调用中传递 base64 字符串反应原生
【发布时间】：2022-01-12 19:31:35
【问题描述】：

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

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 核心开发。 expo 的 imagepicker 返回的 Base64 字符串很长，当它使用 fetch 调用发送时，它不会在后端接收到。我从客户端对后端的所有其他调用都可以正常工作，除了这个，唯一的区别是我在有效负载中发送大的 base64 字符串。

我无法弄清楚为什么调用失败以及我是否需要对 fetch 调用（即客户端/api 端，即后端）进行任何特殊设置，以便发送 n 接收 base64 字符串值？

谁能指导我无法通过 base64 字符串从 react native 发送到 .net core api 的原因/错误？

问候，

【问题讨论】：

标签： react-native base64 expo http-post fetch-api

【解决方案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 和 Thread2。

【讨论】：

我的问题与如何将 base64 字符串显示为图像无关，而是与将 base64 字符串发送到后端有关。你的答案完全不符合标准。

【解决方案2】：

使用 axios 而不是 fetch 帮助我解决了我的问题。将标头中的 maxBodyLength 设置为更大的 int 值会有所帮助。以下是代码 sn -p ：

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

【讨论】：