Question

邮递员表单数据运行正常，但是在出现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>
    );
  }
}

Answer 1

我不知道您是否仅在Android上遇到问题，但是我在将Network Request failed放在Android上发布图像和视频时遇到了错误。

此处更多信息Fetch requests failing on Android to AWS S3 endpoint

基本上，解决方案是在我的情况下，在formData中发送的fileType必须为'/ jpg'或'/ mp4'，而ImagePicker仅返回类型为'image'或'video'。 iOS显然允许请求，但Android不允许。

Answer 2

它似乎是最后一次重播，您也可以检查一下我的文章。

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

Answer 3

我可能发布答案的时间很晚，但对于遇到相同错误的其他人可能会有所帮助。以下工作流程为我工作。我使用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。

我希望这会对您有所帮助。

Answer 4

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;

  };

将本机图像上传作为表单数据进行反应

4 个答案: