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

Posted 2023-02-16

【中文标题】用于 Microsoft Azure 表单识别器的 React Native fetch

【英文标题】：ReactNative fetch for Microsoft Azure Form Recognizer

【发布时间】：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;
  

【参考方案1】：

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