react-native 应用程序和 RapidAPI - AI Picture Colorizer

Question

我正在学习这个 Udemy react-native 课程，发现它有点过时了。

课程第 9 部分使用 RapidAPI AI Picture Colorizer 到 select base64 编码图像。但看起来 API 已更新为不再使用 base64，而是使用图片上传。

我正在使用 react-native-imagepicker，但我不确定如何更新代码以从设备库中选择图像并按照 RapidAPI 文档读取的方式上传。

这是 RapidAPI 示例代码：

import axios from "axios";

const form = new FormData();
form.append("image", "");
form.append("renderFactor", "25");

const options = {
  method: 'POST',
  url: 'https://ai-picture-colorizer.p.rapidapi.com/colorize-api-bin-mjbcrab',
  headers: {
    'content-type': 'multipart/form-data; boundary=---011000010111000001101001',
    'x-rapidapi-host': 'ai-picture-colorizer.p.rapidapi.com',
    'x-rapidapi-key': '[MY-API-KEY]'
  },
  data: '[form]'
};

axios.request(options).then(function (response) {
    console.log(response.data);
}).catch(function (error) {
    console.error(error);
});

这是我的代码：

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {Button} from 'react-native-elements';
import ProgressBar from 'react-native-progress/Bar';
import {launchImageLibrary} from 'react-native-image-picker';
import axios from 'axios';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menu: true,
      dataSource: null,
      loading: true,
      base64: null,
      fileName: null,
    };
  }

selectGallaryImage() {
    const options = {
      includeBase64: true,
    };
    launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User canceled Image');
      } else if (response.error) {
        console.log('Image picker error');
      } else if (response.customButton) {
        console.log('User pressed custom Button');
      } else {
        this.setState(
          {
            base64: response.assets[0].base64,
            fileName: response.assets[0].fileName,
          },
          () => console.log('base64 fileName ', this.state.fileName),
        );
        this.goForAxios();
      }
    });
  }


goForAxios() {
    const {fileName} = this.state;
    const form = new FormData();
    form.append('image', fileName);
    form.append('renderFactor', '10');

    this.setState({menu: false});
    console.log('Starting request');
    axios
      .request({
        method: 'POST',
        url: 'https://ai-picture-colorizer.p.rapidapi.com/colorize-api-bin-mjbcrab',
        headers: {
          'content-type':
            'multipart/form-data; boundary=---011000010111000001101001',
          'x-rapidapi-host': 'ai-picture-colorizer.p.rapidapi.com',
          'x-rapidapi-key': '[MY-API-KEY]',
        },
        data: '[form]',
      })
      .then(response => {
        this.setState({
          loading: false,
          dataSource: response.data,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

...
}

我联系了 API 作者，他们建议我参考 RapidAPI 文档，但我似乎无法解决。

我不断收到 [错误：请求失败，状态代码 500] 和运行 RapidAPI 中的测试端点 returns 正常，但“没有此端点的示例响应."

感谢您的帮助。

Answer 1

当服务器由于意外情况找不到合适的状态码时，通常会returns一个500状态码。我不是 React Native 专家，但可以提供帮助。

您正在使用 react-native-image-picker，它已经 returns 其响应中的 Base64 值。所以而不是：

base64: response.assets[0].base64,

试试这个

base64: response.data,

如果还是不行，您可以使用另一个提供类似功能的API。您可以在 RapidAPI Hub 上找到属于同一类别的数千个 API。例如，使用此 Image Colorization API。它允许您将图像作为 URL.

传递

react-native 应用程序和 RapidAPI - AI Picture Colorizer

react-native app and RapidAPI - AI Picture Colorizer

javascript

react-native

axios

rapidapi