用于 Microsoft Azure 表单识别器的 React Native fetch答案

【问题标题】：ReactNative fetch for Microsoft Azure Form Recognizer用于 Microsoft Azure 表单识别器的 React Native fetch
【发布时间】：2021-12-26 02:51:46
【问题描述】：

ReactNative 版本 0.66.3

花了大约 2 天时间尝试所有可能的组合，以了解如何将捕获的图像从 ReactNative 相机上传到 azure 表单识别器，但我遇到了不同的错误。有人可以帮助使用正确的语法吗？

这是我到目前为止所尝试的以及收到的错误。

在表单正文中使用 base64 字符串 - 错误：输入数据不是有效的图像或密码保护
请求正文中表单数据中的 blob 数据 - 错误：同上。
在请求正文的表单数据中添加 base64 - 错误：[TypeError: Network request failed]

这是我的获取函数。论据： uri - 设备中图像的 uri。 base64data - base64 字符串

export async function executeScanService(uri, base64data) {
  try {
    const url = 'https://<my-endpoint>/formrecognizer/v2.1/prebuilt/receipt/analyze';

    // Using base64 string in request body doesnt work
    // const imgData = "data:image/jpeg;base64," + base64data; 

    // create a blob doesn't work either
   const result = await fetch(uri);
   const blobResult = result.blob();
    const formData = new FormData();
    formData.append("image_data", blobResult, 'foo.jpeg');

    let options = {
      method: 'POST',
      headers: {
        'Ocp-Apim-Subscription-Key': <my-key>,
        'Content-Type': 'image/jpeg'      
      },
      body: formData    
};

    const response = await fetch(url, options);

    const respBody = await response.json();
    console.log('response Body', respBody, response.status);

  } catch (error) {
    console.error('Error scan service', error);
    throw error;
  }
}

【问题讨论】：

标签： azure react-native fetch form-recognizer

【解决方案1】：

当指定图像数据 (Content-Type=image/jpeg) 时，主体应包含图像的原始二进制文件，而不是 base64 编码或 FormData。在上面的代码中，请尝试将body设置为atob(base64data)。

【讨论】：