react-native应用程序和RapidAPI - AI图片着色器

Question

我正在学习这个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，但带有"没有此端点的示例响应。">

谢谢你的帮助。

Answer 1

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

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

base64: response.assets[0].base64,

试试这个

base64: response.data,

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