Image 如何在react native中更新图像

我试图更新用户配置文件，但配置文件图片只会更改其中的一个。要每次更改它，我必须每次更改图像名称以解决它。我已尝试在post方法中发送请求，但我的api不支持post。我将在下面发布我的代码。有人可以帮助我并提前感谢

class ProfileEdit extends Component {

  state = {
    username: '',
    email: '',
    about: '',
    userInfo: '',
    avatarSource: null,
    showAlert: false,
    showCancelButton: false,
    showConfirmButton: false,
  };

  constructor(props) {
    super(props);

    this.selectPhotoTapped = this.selectPhotoTapped.bind(this);
  }

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  selectPhotoTapped() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true,
      },
    };

    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri }
        this.setState({
          avatarSource: source,
        });
        this.upLoadImage(response.uri);
      }
    });
  }

  upLoadImage = async (image_uri) => {
    const value = await AsyncStorage.getItem('userToken');
    //alert(value)
    var url = 'http://www.dev.beta.duklr.com:8000/api/v2/profile/';
    var b_url = url + value + '/';

    let data = new FormData();
    data.append('photo', { type: 'image/jpg', uri: image_uri, name: 'profile_image1.jpg' });
    data.append('Content-Type', 'image/jpg');
    fetch(b_url, {
      method: 'PUT',
      body: data
    }).then((res) => res.json())
      .then((res) => {
        // alert("response" + JSON.stringify(res)); 
      })
      .catch((e) => this.setState({
        showAlert: true,
        message: e,
        showCancelButton: true,
        cancelText: 'close',
      }))
      .done()
  }

  componentDidMount = async () => {
    const value = await AsyncStorage.getItem('userToken');
    //alert(value)
    var url = 'http://www.dev.beta.duklr.com:8000/api/v2/profile/';
    var b_url = url + value + '/';

    //alert(value);

    return fetch(b_url)
      .then(res => res.json())
      .then(res => {
        this.setState(
          {
            isLoading: false,
            refreshing: false,
            userInfo: res,
          },
          function () { }
        );
      })
      .catch(error => {
        this.setState({
          showAlert: true,
          message: error,
          showCancelButton: true,
          cancelText: 'close',
        })
      });
  }



  onUpdate = async () => {

    const value = await AsyncStorage.getItem('userToken');

    var url = 'my_api';
    var b_url = url + value + '/';

    //alert(b_url);

    const { email, about, avatarSource } = this.state;
    //alert(`${email},${about}`);
    fetch(b_url, {
      method: 'PUT',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        about_us: about,
      }),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          showAlert: true,
          message: "Saved successfully",
          showCancelButton: true,
          cancelText: 'close',
        })
        // this.setState({
        //   dataSource: responseJson.promptmsg,
        // })
      })
      .catch((error) => {
        this.setState({
          showAlert: true,
          message: error,
          showCancelButton: true,
          cancelText: 'close',
        })
      });
  }
  catch(errors) {
    this.setState({
      showAlert: true,
      message: errors,
      showCancelButton: true,
      cancelText: 'close',
    });
  }

  render() {
    const value_email = this.state.userInfo.email;
    const value_about = this.state.userInfo.about_us;
    return (
      <View style={styles.continer}>
        <ScrollView>
          <View style={{ alignItems: 'center', padding: 20 }}>
            <Avatar
              source={this.state.avatarSource}
              size="xlarge"
              // showEditButton
              onPress={this.selectPhotoTapped.bind(this)}
            />
          </View>
          <View style={styles.textContiner}>
            {/* <TextField
              label='User Name'
              title={this.state.userInfo.name}
              value={this.state.username}
              onChangeText={(username) => this.setState({ username })}
            /> */}
            <TextField
              label='Email Id'
              placeholder={value_email}
              //value={value_email}
              onChangeText={(email) => this.setState({ email })}
            />
            <TextField
              label='About'
              //value={value_about}
              placeholder={value_about}
              onChangeText={(about) => this.setState({ about })}
            />
            <View style={{ marginTop: 20 }}>
              <Button
                title="Save"
                onPress={this.onUpdate.bind(this)}>
              </Button>
            </View>
          </View>
        </ScrollView>
        <AwesomeAlert
          show={this.state.showAlert}
          showProgress={false}
          title="Hello There"
          message={this.state.message}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={true}
          showCancelButton={this.state.showCancelButton}
          showConfirmButton={this.state.showConfirmButton}
          cancelText={this.state.cancelText}
          confirmText={this.state.confirmText}
          confirmButtonColor="#DD6B55"
          onCancelPressed={() => {
            this.hideAlert();
          }}
          onConfirmPressed={() => {
            this.hideAlert();
          }}
        />
      </View>
    );
  }
}
export default ProfileEdit;

class ProfileEdit扩展组件{
状态={
用户名：“”，
电子邮件：“”，
关于：''，
用户信息：“”，
avatarSource:null，
showarert:false，
showCancelButton:false，
showconfixton:false，
};
建造师（道具）{
超级（道具）；
this.selectPhotoTapped=this.selectPhotoTapped.bind（this）；
}
hideAlert=（）=>{
这是我的国家({
showAlert:错误
});
};
selectPhotoTapped（）{
常量选项={
质量：1.0，
最大宽度：500，
最大高度：500，
存储选项：{
skipBackup：没错，
},
};
ImagePicker.showImagePicker（选项，响应=>{
log（'Response='，Response）；
if（response.didconcel）{
console.log（'User cancelled photo picker'）；
}else if（response.error）{
log（'ImagePicker错误：'，response.Error）；
}else if（response.customButton）{
console.log（'用户点击自定义按钮：'，response.customButton）；
}否则{
常量源={uri:response.uri}
这是我的国家({
来源:，
});
这个.upLoadImage（response.uri）；
}
});
}
upLoadImage=async（图像uri）=>{
const value=await AsyncStorage.getItem（'userToken'）；
//警报（值）
var url='1〕http://www.dev.beta.duklr.com:8000/api/v2/profile/';
var b_url=url+value+'/'；
let data=new FormData（）；
append（'photo'，{type:'image/jpg'，uri:image\u uri，name:'profile\u image1.jpg'}）；
data.append（'Content-Type'，'image/jpg'）；
获取（b_url{
方法：'放'，
正文：数据
}).然后（（res）=>res.json（））
。然后（（res）=>{
//警报（“响应”+JSON.stringify（res））；
})
.catch（（e）=>this.setState({
showAlert：没错，
信息：e，
showCancelButton:true，
取消文本：“关闭”，
}))
.完成
}
componentDidMount=async（）=>{
const value=await AsyncStorage.getItem（'userToken'）；
//警报（值）
var url='1〕http://www.dev.beta.duklr.com:8000/api/v2/profile/';
var b_url=url+value+'/'；
//警报（值）；
返回获取（b_url）
.then（res=>res.json（））
。然后（res=>{
这是我的国家(
{
孤岛加载：false，
刷新：错，
userInfo:res，
},
函数（）{}
);
})
.catch（错误=>{
这是我的国家({
showAlert：没错，
信息：错误，
showCancelButton:true，
取消文本：“关闭”，
})
});
}
onUpdate=async（）=>{
const value=await AsyncStorage.getItem（'userToken'）；
var url='my_api'；
var b_url=url+value+'/'；
//警报（b_url）；
const{email，about，avatarSource}=this.state；
//警报（`${email}，${about}`）；
获取（b_url{
方法：'放'，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
电邮:电邮,，
关于我们：关于，
}),
})
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
showAlert：没错，
消息：“保存成功”，
showCancelButton:true，
取消文本：“关闭”，
})
//这是我的国家({
//数据来源：responseJson.promptmsg，
// })
})
.catch（（错误）=>{
这是我的国家({
showAlert：没错，
信息：错误，
showCancelButton:true，
取消文本：“关闭”，
})
});
}
捕获（错误）{
这是我的国家({
showAlert：没错，
信息：错误，
showCancelButton:true，
取消文本：“关闭”，
});
}
render（）{
const value_email=this.state.userInfo.email；
const value_about=this.state.userInfo.about_us；
返回(
{/*this.setState（{username}）}
/> */}
this.setState（{email}）}
/>
this.setState（{about}）}
/>
{
这个。hideAlert（）；
}}
onConfirmPressed={（）=>{
这个。hideAlert（）；
}}
/>
);
}
}
导出默认配置文件编辑；
是基于React Native的
图像的
化身吗？根据我的经验，React Native附带的
Image
组件有很多缺陷。事实上，重新加载问题就是其中之一。我经常用它来代替
图像
What's FormData（）？在接下来的教程中，它展示了上传图像的方法。在这里，将数据作为FormDataAvatar发送是一个react native elements组件。它显示良好，但我只能更新图像一次。