英文:

How to efficiently send an image captured using react-native-vision-camera to my Express.js backend for processing?

问题 {#heading}

我在我的React Native应用中使用react-native-vision-camera来捕捉植物的图像。一旦捕获到图像，我打算将其发送到后端（使用Express.js和MongoDB）进行识别。

以下是我捕获照片的代码片段：

const capturePhoto = async () => {
  if (camera.current !== null) {
    const photo = await camera.current.takePhoto({});
    setImageSource(photo.path);
    setShowCamera(false);
    console.log(photo.path);
  }
};

路径保存在imageSource状态中。拍摄图像后，我在屏幕上显示它，并在旁边有一个"Identify"按钮，单击该按钮会触发handleIdentify函数。

const handleIdentify = async () => {
    try {
      const base64String = await ImgToBase64.getBase64String(`file://${imageSource}`);
      const response = await axios.post(API_BASE_URL, {
        image: base64String
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      console.log(response.data);
      console.log('base64: ', base64String)
    } catch(error) {
      console.error("Failed to identify plant:", error);
    }
  }

我尝试将图像转换为Base64格式，但似乎Base64字符串，特别是对于高分辨率图像，可能会变得非常大而难以通过API调用发送。在尝试后，我收到了413状态代码。

现在，我的问题是，什么是解决此问题并将图像上传到后端的最佳方法？（还应注意，这是我的大学项目，所以我的数据库不会包含太多数据）英文:

I'm using react-native-vision-camera in my React Native app to capture images of plants. Once captured, I aim to send it to my backend (using Express.js and MongoDB) for identification.

Here's a snippet of my code where I capture the photo:

const capturePhoto = async () =&gt; {
  if (camera.current !== null) {
    const photo = await camera.current.takePhoto({});
    setImageSource(photo.path);
    setShowCamera(false);
    console.log(photo.path);
  }
};

Path is saved in imageSource state. After taking an image I show it on screen, and next to it there is a button Identify, when clicked handleIdentify function is triggered.

const handleIdentify = async () =&gt; {
    try {
      const base64String = await ImgToBase64.getBase64String(`file://${imageSource}`);
      const response = await axios.post(API_BASE_URL, {
        image: base64String
      }, {
        headers: {
          &#39;Content-Type&#39;: &#39;application/json&#39;
        }
      })
      console.log(response.data);
      console.log(&#39;base64: &#39;,base64String)
    } catch(error) {
      console.error(&quot;Failed to identify plant:&quot;, error);
    }
  }

I've tried converting the image to Base64 format, but it seems the Base64 strings, especially for high-resolution images, can become quite large and cumbersome to send via API calls. I have gotten the 413 status code after trying this.
Now, my question this what would be the best way to solve this, and upload images to my backend? (Also I should note that this is for my University project, so my DB won't be populated with much data)

答案1 {#1}

得分: 1

filestack有一个免费的层次，大约可以上传500张图片。
它还有iOS和Android的SDK。您可以使用这些SDK直接上传高分辨率的图片，并将公共URL发送到数据库。这里是SDK的链接：
https://www.filestack.com/docs/uploads/pickers/

更新：您可以使用expo-file-system.uploadAsync从您的图像选择器生成的URI直接上传高分辨率图像到您首选的存储端点，以生成公共图像URL，然后可以保存到数据库中。这可以消除下面步骤所需的3MB限制，但也意味着免费层次的存储空间将迅速用完。
Filestack端点："https://www.filestackapi.com/api/store/S3?key=MY_API_KEY"

我遇到了类似的问题，但我一直在使用expo-image-picker。
以下是对我有效的步骤，使用了默认的质量而不是1。
一旦选择了图像，请添加一个检查，以确保图像大小小于3MB，使用expo-file-system或类似的工具。
我将base64发送到后端，然后上传到（filestack或aws）以获取一个公共链接，我将其存储在MongoDB中。英文:

filestack has a free tier for about 500 image uploads.
And it has sdk for iOS and android. You can implement that to upload the high resolution images directly and send the public url to db. here is the link for the sdk's:
https://www.filestack.com/docs/uploads/pickers/

Update: you can upload high resolution images directly from your imagepicker generated uri using expo-file-system.uploadAsync to your preferred storage endpoint to generate public image url which then can be saved to db. This takes out the limit of 3mb that below steps required but also means the free tier storage will get used up fast.
File stack endpoint: "https://www.filestackapi.com/api/store/S3?key=MY_API_KEY"

I just encountered similar issues, but I have been working with expo-image-picker.
Here are the steps that worked for me for expo-image-picker. Used the default quality instead of 1.
Once image is picked, Add a check for the image size to be less than 3 mb using expo-file-system or something similar.
I sent base64 to backend and uploaded to (filestack or aws) to get a public link which I stored in mongodb.