[React-native]react-native-vision-camera 사진 서버로 보내기

안녕하세요! 이번에는 비전 카메라로 찍은 사진을 등록버튼을 통해 페이지에 등록하고

이름과 전화번호와 함께 서버로 전송해보겠습니다

파일의 uri를 알고 있는데 이것을 바탕으로 어떻게 파일을 서버로 전송할지 고민하다가 서치를 통해 알아냈다

이런식으로 uri와 type, name을 통해 BinaryData를 만들 수 있었다

 

VisionCamFlat.js

uploadimg = () => {
        this.props.navigation.navigate('UploadImg', {imageInputValue:this.state.imageURLs});
        console.log(this.state.imageURLs)
    }

<TouchableOpacity style={styles.btn_put} onPress={this.uploadimg}>
    <Text style={styles.text}>등 록</Text>
</TouchableOpacity>

navigation.navigate 메소드의 2번째 인자에 parameter 를 객체로 전달하였다.

- this.props.navigation.navigate('RouteName', { /* params go here */ })

 

 

 makeBinaryData() {
        let imageData = []; // 이미지 객체를 저장해 줄 배열 만들어주기
        const imageURLs = this.props.route.params.imageInputValue;//VisionCamFlat에서 받은 ImageInputValue
        for (let i = 0; i < imageURLs.length; i++) { // 배열안에 있는 이미지의 갯수만큼 반복문 돌려주기
            const uri = imageURLs[i]; // 갯수만큼 uri 만들어줌
            const filename = uri.substring(uri.lastIndexOf("/") + 1); 
            const fileData = {
                uri: uri,
                type: "image/jpeg",
                name: 'photo.jpg',
            }
            imageData.push(fileData);// imageData 배열 안에 이미지의 객체들을 push
        }
        return imageData; // 객체가 들어있는 배열을 리턴
    }

응용하여 makeBinaryData를 만들어 이미지 객체를 생성해주었다. 전달받은 parameter를 읽을때는 this.props.route.params.paramname 으로 호출하여 읽을 수 있다.

처음에는 여러장이 아닌 한장을 먼저 보내보았는데 작동이 잘 되는 것을 확인하고 여러장 보낼 수 있게 만들었다.

위의 코드는 여러장을 보내기 위한 코드이다.

upload = () => { // 등록 버튼을 눌렀을 때 호출되는 함수
        const imageData = this.makeBinaryData(); 
        this.callUploadAPI(imageData).then((response) => {
            console.log(response);
        })
    }

async callUploadAPI(imageData) { // 이미지와 데이터를 서버로 보내주는 API
        let manager = new WebServiceManager(Constant.serviceURL + "/AddMultiFiles", "post");
        filenames = []; //"file1","file2" ... 파일 이름들을 넣어줄 배열

        for (let i = 0; i < imageData.length; i++) { //리턴받은 이미지 객체 배열의 길이만큼 반복
            filenames.push("file"+(i+1)); // 파일 이름들을 배열에 넣어줌
            manager.addBinaryData("file"+(i+1),imageData[i]); //addBinaryData에 앞에는 이미지의 이름들 뒤에는 이미지 객체가 들어있는 배열
        }
        manager.addFormData("data", { name: this.state.name, phone: this.state.phone, filenames: filenames });

        let response = await manager.start();// --끝났다
        if (response.ok) {
            return response.json();
        }
    }

makeBinaryData를 imageData로 받아와 이미지와 데이터들을 서버로 보낸다. ( Post )