[React-Native] Image Blob

API를 사용하여 사업자 등록증과 명함 사진을 서버에서 들고와보았습니다.

---

✅ 로그인 되어있는 사용자의 아이디와 패스워드를 서버로 보내 사진을 가져오는 API

//사업자등록증 사진을 가져오는 API
    async callGetCompanyImage(loginInfo) {
        let manager = new WebServiceManager(Constant.serviceURL + "/GetCompanyImage", "post");
        manager.addFormData("data", {
            userID: loginInfo.userID, passwd: loginInfo.passwd, id: 2
        });
        let response = await manager.start();
        if (response.ok) {
            return response.blob();
        }
    }

    //명함 사진을 가져오는 API
    async callGetcardImage(loginInfo) {
        let manager = new WebServiceManager(Constant.serviceURL + "/GetNamecardImage", "post");
        manager.addFormData("data", {
            userID: loginInfo.userID, passwd: loginInfo.passwd, id: 2
        });
        let response = await manager.start();
        if (response.ok) {
            return response.blob();
        }
    }

 return response.blob(); 을 통해 회원가입 시 등록하였던 사업자등록증 & 명함 사진을 가져올 수 있습니다.

 

✅ 정보 수정 페이지에 접근하자마자 호출될 수 있도록 componentDidMount에서 API를 호출

componentDidMount() {
        this.getLoginInfo().then((value) => {
            this.loginInfo.companyNo=value.companyNo;
            this.loginInfo.userID = value.id;
            this.loginInfo.passwd = value.passwd;
            this.setState({ companyNo: value.companyNo ,value:value})
            console.log(this.state.companyNo)
            this.callGetCompanyImage(this.loginInfo).then((response) => {
                let reader = new FileReader();
                reader.readAsDataURL(response);
                reader.onloadend = () => {
                    this.setState({ companyNoImageURL: reader.result });
                }
            });
            this.callGetcardImage(this.loginInfo).then((response) => {
                let reader = new FileReader();
                reader.readAsDataURL(response);
                reader.onloadend = () => {
                    this.setState({ cardImageURL: reader.result });
                }
            });
        });

    }

로그인 되어있는 사용자의 정보를 AsyncStorage에서 받아와 API를 실행해주었다

 

✅ render()

    <View style={styles.imageRegister_btnLayout_view}>
    {/*사업자 등록증 사진*/}
    <View style={styles.imageRegister_btn_view}>
        <Text style={[styles.default_text, styles.imageRegister_title_text]}>사업자 등록증</Text>
        <TouchableOpacity style={styles.imageRegister_btn} onPress={this.companyImageModal}>
            <Image source={{ uri: this.state.companyNoImageURL }} style={styles.imageRegister_image_view} />
        </TouchableOpacity>
    </View>
    {/*명함 사진*/}
    <View style={styles.imageRegister_btn_view}>
        <Text style={[styles.default_text, styles.imageRegister_title_text]}>명함</Text>
        <View onLayout={(event) => { this.getViewSize(event) }} ref={this.photoCameraIcon}>
            {this.state.cardImageURL == "" ?
                (<TouchableOpacity style={styles.imageRegister_btn} onPress={() => this.setState({ cardPopupMenuVisible: true })}>
                    <IconCamera name="image-inverted" size={60}></IconCamera>
                </TouchableOpacity>) : (<TouchableOpacity style={styles.imageRegister_btn} onPress={this.cardImageModal}>
                    <Image source={{ uri: this.state.cardImageURL }} style={styles.imageRegister_image_view} />
                    <TouchableOpacity style={styles.imageDelete_btn} onPress={this.photoRemoveClicked}>
                        <IconDelete name="close-circle" color="black" size={27}></IconDelete>
                    </TouchableOpacity>
                </TouchableOpacity>)
            }
        </View>
    </View>
</View>

사업자 등록 이미지는 수정이 불가하고 명함 사진은 수정이 가능하도록 구현하였습니다.