我试图更新用户个人资料,但是个人资料图片只更改了一个。要更改它,每次必须每次更改图像名称来解决它时,我都尝试过用post方法发送请求,但是我api不支持发布。我将在下面发布我的代码。能有人帮我吗,谢谢。
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,})
});
}
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,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",})
// this.setState({
// dataSource: responseJson.promptmsg,// })
})
.catch((error) => {
this.setState({
showAlert: true,})
});
}
catch(errors) {
this.setState({
showAlert: true,message: errors,});
}
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;