react native 頭像上傳 react-native-image-crop-picker

之前用的是react-native-image-picker,但是當往服務器端傳的時候才發現,因為沒有圖片裁切,所以圖片過大,無法保存,所以只好更換成react-native-image-crop-picker。
react-native-image-crop-picker 不像 react-native-image-picker 直接就有彈出框,然后根據選擇跳入到相應的相機或相冊中,所以需要我們自定義彈出框,這里使用的是 modal。
react-native-image-crop-picker 的導入及配置這里就不說了,可以參考github上:
https://github.com/ivpusic/react-native-image-crop-picker
1、自定義彈出框(modal)
react native 提供的 Alert 局限性較大,沒有辦法自定義,所以我這里選擇用 Modal 來實現。
簡單了解:Modal組件可以用來覆蓋包含 react native 根視圖的原生視圖,在嵌入 react native 的混合應用中可以使用 modal,modal 可以使你應用中 RN 編寫的那部分內容覆蓋在原生視圖上顯示。
常見屬性:

visible // 是否可見  false/true
animationType  // 動畫  none:無/slide:從底部/fade:淡入淡出            
transparent = {true}  // 是否默認半透明
onRequestClose={()=> this.onRequestClose()}  // 彈出框關閉回調
<View >
    <Modal
       visible={this.state.modalVisible}
        animationType={'fade'}
        transparent = {true}
        onRequestClose={()=> this.onRequestClose()}
    >
        <View style={styles.alertBackground}>
            <View style={styles.alertBox}>
                <Text style={styles.modalTitle}>請選擇</Text>
                <TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._openCamera}>
                    <Text style={styles.modalItem}>打開相機</Text>
                </TouchableHighlight>
                <TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._openPicker}>
                    <Text style={styles.modalItem}>打開相冊</Text>
                </TouchableHighlight>
                <TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._closeModal}>
                    <Text style={styles.modalItem}>取消</Text>
                </TouchableHighlight>
            </View>
        </View>
    </Modal>
</View>

用 state 中 modalVisible 的狀態來管理彈出框的顯示與關閉。
style樣式:

alertBackground:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'rgba(0, 0, 0, 0.5)’,  // 如果要遮罩要顯示成半透明狀態,這里一定要設置,reba中的a控制透明度,取值在 0.0 ~ 1.0 范圍內。
},

alertBox: {
    width:200,
    height:175,
    backgroundColor:'white',
},

_openCamera: // 調用相機,這里就要用到 react-native-image-crop-picker 了,所以記得 import 它。
// 是一個異步加載,當正確是返回 image ,這里面就是我們需要的圖片信息。

ImagePicker.openCamera({
    width:300,
    height:400,
    cropping:true
}).then(image => {
    let source = {uri: image.path};

    this._fetchImage(image);

    this.setState({
        avatarSource: source  // 將圖片存于本地
    });
});

_openPicker: // 調用相冊

ImagePicker.openPicker({
    width:300,
    height:400,
    cropping: true
}).then(image => {
    let source = {uri: image.path};

    this._fetchImage(image);

    this.setState({
       avatarSource: source
    });
});

將圖片文件上傳:

_fetchImage(image) {
    let url = “http:。。。。。。。。”; // 接口地址
    let file = {uri: image.path, type: 'multipart/form-data', name:’image.png' } ; // file 中這三個元素缺一不可。 type 必須為 multipart/form-data。

    let formData = new FormData();
    formData.append('file', file); // 這里的 file 要與后臺名字對應。

    fetch(url,{
        method:'POST',
        headers:{
            'Content-Type':'multipart/form-data',
        },
        body:formData,
    }).then(function (response) {
        console.log("response",response);
        return response.json();
    })
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容