邮递员表单数据运行正常,但是在出现HTTP 500错误后返回。这个方块有什么问题。
Response {type:“ default”,status:500,ok:false,statusText: 未定义,标头:标头,…}标头:标头{map:{…}}好: falsestatus:500statusText:undefinedtype:“默认” url: “ http://cupdes.com/api/v1/create-user” _ bodyInit:“” _bodyText: “” proto :对象“ rtghj”
import React, {Component} from 'react';
import {Platform, StyleSheet,View,Image,ScrollView,TextInput,KeyboardAvoidingView,TouchableOpacity,TouchableHighlight,AsyncStorage,} from 'react-native';
import { Container, Header, Content, Button, Text,Input, Label,Item,Form, } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome5';
import ImagePicker from 'react-native-image-picker';
export default class SignUp extends Component {
constructor(){
super();
this.state = {
email: "",
name: "",
password: "",
photo: null ,
errors: [],
showProgress: false,
}
}
handleChoosePhoto = () => {
const options = {
noData: true,
};
ImagePicker.launchImageLibrary(options, response => {
if (response.uri) {
this.setState({ photo: response });
}
});
};
onPressSubmitButton() {
console.log("Image ",this.state.photo,this.state.email,this.state.password,this.state.name)
this.onFetchLoginRecords();
}
async onFetchLoginRecords() {
const createFormData = () => {
var data = new FormData();
data.append("image", {
name: this.state.photo.fileName,
type: this.state.photo.type,
uri:
Platform.OS === "android" ? this.state.photo.uri : this.state.photo.uri.replace("file://", "")
});
data.append('name', this.state.name);
data.append('password',this.state.password);
data.append('email', this.state.email);
console.log("aaaa",data);
return data;
};
try {
let response = await fetch(
'http://cupdes.com/api/v1/create-user',
{
method: 'POST',
headers: {
'X-AUTH-TOKEN': 'Px7zgU79PYR9ULEIrEetsb',
'Content-Type': 'multipart/form-data'
},
body:createFormData()
}
)
.then((response) => {
console.log(response,"rtghj")
this.setState({ photo: null });
if (JSON.parse(response._bodyText) === null) {
alert("Internal server error!!!");
}else{
if (JSON.parse(response._bodyText).success === "true") {
this.props.navigation.navigate('loading');
}else{
alert("Data missing!!!");
}
}
})
} catch (errors) {
alert(errors);
}
} SignupHandler=()=>{
this.props.navigation.navigate('DrewerNav')
}
SignuptologinHandler=()=>{
this.props.navigation.navigate('SigntoLogin')
}
render() {
const { photo } = this.state;
return (
<KeyboardAvoidingView
style={styles.wrapper}
>
<View style={styles.scrollWrapper}>
<ScrollView style={styles.scrollView}>
<View style={styles.LogoContainer}>
<Image source={require('../Images/avatar1.png')} style={styles.Logo} onPress={this.handleChoosePhoto} />
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
{photo && (
<Image
source={{ uri: photo.uri,
type: "image/jpeg",
name: photo.filename }}
style={{ width: 125, height: 125,borderRadius:80}}
/>
)
}
<TouchableOpacity >
<Icon name="image" size={30} color="#222" marginTop='30' position='absolute' onPress={this.handleChoosePhoto}position='relative'/>
</TouchableOpacity>
</View>
<Text style={styles.createNew1}> CREATE ACCOUNT</Text>
</View>
<View>
<Form style={styles.inputwrapper} >
<Item >
<Icon name="user" size={25} color="white"/>
<Input style={styles.input}
placeholder='Your name'
placeholderTextColor={'white'}
name="name"
onChangeText={text => this.setState({ name: text })}
/>
</Item>
<Item >
<Icon name="mail-bulk" size={25} color="white"/>
<Input style={styles.input}
placeholder='Your e-mail'
placeholderTextColor={'white'}
name="email"
onChangeText={text => this.setState({ email: text })}
/>
</Item>
<Item >
<Icon name="lock" size={25} color="white"/>
<Input style={styles.input}
secureTextEntry
placeholder='Your password'
placeholderTextColor={'white'}
name="password"
onChangeText={text => this.setState({ password: text })}
/>
</Item >
<Item >
<Icon name="unlock" size={25} color="white"/>
<Input style={styles.input}
secureTextEntry
placeholder='Confirm password'
placeholderTextColor={'white'}
name="password"
/>
</Item>
</Form>
</View>
<View>
<TouchableOpacity >
<Button style={styles.btnLogin} onPress={this.onPressSubmitButton.bind(this)}
>
<Text style={styles.text} >Sign Up </Text>
</Button>
</TouchableOpacity>
<TouchableOpacity onPress={this.SignuptologinHandler} >
<Text style={styles.createNew}> Have an account ?LOG IN</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
);
}
}
答案 0 :(得分:2)
我不知道您是否仅在Android上遇到问题,但是我在将Network Request failed
放在Android上发布图像和视频时遇到了错误。
此处更多信息Fetch requests failing on Android to AWS S3 endpoint
基本上,解决方案是在我的情况下,在formData中发送的fileType必须为'/ jpg'或'/ mp4',而ImagePicker
仅返回类型为'image'或'video'。 iOS显然允许请求,但Android不允许。
答案 1 :(得分:1)
它似乎是最后一次重播,您也可以检查一下我的文章。
uploadImageToServer = () => {
RNFetchBlob.fetch('POST', base.BASE_URL + '/php_imagefileupload.php', {
Authorization: "Bearer access-token",
otherHeader: "foo",
'Content-Type': 'multipart/form-data',
}, [
{ name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data },
{ name: 'image_tag', data: this.state.Image_TAG, data: this.state.username }
]).then((resp) => {
var tempMSG = resp.data;
tempMSG = tempMSG.replace(/^"|"$/g, '');
Alert.alert(tempMSG);
}).catch((err) => {
// ...
})
}
博客网址:https://www.banglacleverprogrammer.life/2020/05/react-native-upload-image-to-server.html
答案 2 :(得分:0)
我可能发布答案的时间很晚,但对于遇到相同错误的其他人可能会有所帮助。以下工作流程为我工作。我使用node.js作为后端。
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
path: 'images',
cameraRoll: true,
waitUntilSaved: true,
},
};
ImagePicker.showImagePicker(options, response => {
if (response.didCancel) {
console.log('User cancelled photo picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
let source = response;
this.setState({profileImage: source});
}
});
}
saveToServer(){
let {profileImage} = this.state;
// initilizing form data
let formData = new FormData();
formData.append('file', {
uri: profileImage.uri,
type: 'image/jpeg/jpg',
name: profileImage.fileName,
data: profileImage.data,
});
axios.post('http://192.156.0.22:3000/api/updateProfile', userDetail, {
headers: {'Content-Type': 'multipart/form-data'},
}).then(res => //)
.catch(err => //);
}
在节点服务器中,我正在做类似的事情。
//index.js
//..
const formData = require('express-form-data');
//..
//
app.use(formData.parse());
// profile.js
profile.post('/updateProfile', async (req, res) => {
let imageCloud = await cloudinary.v2.uploader.upload(req.files.file.path, {
use_filename: true
});
}
注意:我正在使用cloudinary存储图像。 上面的代码适用于android和iOS。
我希望这会对您有所帮助。
答案 3 :(得分:-2)
createFormData = () => {
console.log("RESPOSTA FORMDATA")
console.log("NAME: " + this.state.photo.fileName);
console.log("TYPE: " + this.state.photo.type);
console.log("URI: " + this.state.photo.uri);
console.log("PATH: " + this.state.photo.path);
var foto = {
uri: Platform.OS === "android" ? this.state.photo.uri : this.state.photo.uri.replace("file://", ""),
type: this.state.photo.type,
name: this.state.photo.fileName,
path: this.state.photo.path
};
const fotoUsuario = new FormData();
fotoUsuario.append("foto", foto)
return fotoUsuario;
};