我正在尝试使用react native / expo上传图像,并将其发送到Python Flask后端服务器。但是,在我的Flask服务器中,出现以下错误: werkzeug.exceptions.BadRequestKeyError:400错误的请求:浏览器(或代理)发送了该服务器无法理解的请求。
以下是上传图片的代码(效果很好):
import React from "react";
import {
StyleSheet,
Text,
View,
Image,
Button,
Alert,
TouchableOpacity,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";
import { editProfilePicture } from "../functions/network_authentication";
import { onPressHandler } from "../functions/utils";
export default class EditPicture extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
image: null,
};
}
handleChange(event) {
this.setState({
image: event,
});
console.log("handle change ok");
console.log(this);
}
askForPermission = async () => {
const permissionResult = await Permissions.askAsync(Permissions.CAMERA);
if (permissionResult.status !== "granted") {
Alert.alert("no permissions to access camera!", [{ text: "ok" }]);
return false;
}
return true;
};
takeImage = async () => {
// make sure that we have the permission
const hasPermission = await this.askForPermission();
if (!hasPermission) {
console.log("no permission");
return;
} else {
console.log("permission");
// launch the camera with the following settings
let image = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [3, 3],
quality: 1,
//base64: true,
});
console.log("image got");
// make sure a image was taken:
if (!image.cancelled) {
console.log("image not canceled");
console.log(image);
this.handleChange(image);
}
}
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{ justifyContent: "center", alignItems: "center" }}
onPress={this.takeImage}
>
<Text
style={{ alignSelf: "center", fontSize: 20, fontWeight: "bold" }}
>
Upload
</Text>
</TouchableOpacity>
{this.state.image != null ? (
<View
style={{
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
marginTop: "3em",
height: "30%",
width: "15%",
borderWidth: 4,
borderColor: "black",
}}
>
<Image
source={this.state.image}
style={{width: "100%", height: "100%", alignSelf: "center"}}
/>
</View>
) : null}
<TouchableOpacity
style={{
width: "80%",
height: "10%",
alignSelf: "center",
borderRadius: 8,
borderWidth: 3,
borderColor: "#000000",
bottom: 20,
position: "absolute",
alignContent: "center",
justifyContent: "center",
}}
onPress={() => {
let result = editProfilePicture(this.state.image);
result.then((res) => {
if (res) {
onPressHandler(
this.state.navigation,
"SuccessEdit",
);
}
});
}}
>
<Text style={{ alignSelf: "center", fontWeight: "bold" }}>
Send the picture !
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
flexDirection: "column",
},
});
如您所见,当我们按下发送图片时,我们正在运行editProfilePicture函数:
export const editProfilePicture = async (uploaded_image) => {
let form_data = new FormData();
form_data.append("input_image", uploaded_image, "photo.jpg");
try {
let response = await fetch(
"127.0.0.1:5000/change_profile_picture",
{
body: form_data,
method: "put",
credentials: "include",
}
);
if (response.ok) {
let json = await response.json();
return true;
} else {
console.log("Not OK");
return false;
}
} catch (error) {
console.error(error);
return false;
}
};
请求已发送到Flask服务器,但在我的端点中,我在此行遇到400错误:
@auth.route("/change_profile_picture", methods=["PUT"])
@jwt_refresh_token_required
def change_profile_picture():
"""
To do when the other endpoints work
"""
input_image = request.files["input_image"] # HERE !
结论:我认为问题出在我发送图片的方式上。我该怎么办?我对Blob,Canvas等一无所知,因此欢迎一些代码行!