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

Question

Postman formdata 工作正常，但这会在 http 500 错误后返回。这个块有什么问题。

响应 {type: "default", status: 500, ok: false, statusText: undefined, headers: Headers, ...}headers: Headers {map: {...}}ok: falsestatus: 500statusText: undefinedtype: "default"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

我发布答案可能很晚，但它可能对遇到相同错误的其他人有所帮助。以下工作流程对我有用。我使用 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 => //);
}

在节点服务器中，我正在做这样的事情。

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());

注意：我使用 cloudinary 来存储我的图像。上面的代码适用于 android 和 iOS。

我希望这会在一定程度上帮助你。