2

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

课程第 9 部分使用RapidAPI AI 图片着色器来选择 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 中运行测试端点返回 OK，但显示“此端点没有示例响应”。

谢谢您的帮助。

4

1 回答 1

1

500当服务器由于意外情况找不到任何合适的状态码时，通常会返回一个状态码。我不是 React Native 专家，但在这里提供帮助。

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

base64: response.assets[0].base64,

尝试这个

base64: response.data,

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

于 2021-09-15T21:42:10.063 回答