[Expo] 웹앱 이미지 데이터 전송 이슈

Question

앱에서 웹뷰로 카메라 촬영 및 갤러리 선택 이미지들을 보내고 있는데 android와 ios를 각각 다르게 설정을 해줘야 되나요?웹뷰에서 앱에서 받은 이미지들을 출력을 해야 돼서, android와 ios 모두 이미지 데이터를 base64 uri 형식으로 바꾼 다음 MIME 타입을 갖춘 채 데이터를 보내게끔 설정을 했는데, android와 ios 모두 이미지 데이터가 정상적으로 변환이 돼는걸 로그로 찍어 봤을때 확인이 되었습니다.하지만 ios 에서 테스트 해봤을때 이미지가 정상적으로 전송이 돼서 웹뷰에서 받은 이미지가 출력이 됐고, 콘솔창에서도 받은 이미지 데이터가 정상적으로 출력이 되는걸 확인했습니다. 근데 android 에서 테스트 해봤을때는 이미지 형식 변환은 잘됐지만, 이미지가 정상적으로 전송이 안됐는지 웹뷰에서 받은 이미지가 출력이 안되고 있고, 콘솔창에서도 받은 이미지 데이터가 출력이 안되는고 있습니다.requestCameraPermission.tsexport const requestCameraPermission = async ( webviewRef: React.RefObject>, navigation: StackNavigationProp ) => { const { status } = await Camera.getCameraPermissionsAsync(); if (status === "granted") { console.log("카메라 권한 허용됨"); const image = await takePhoto(); Platform.OS === "ios" ? console.log( "ios 촬영 이미지 데이터 앞부분:", image?.map((i) => i.substring(0, 100)) ) : console.log( "android 촬영 이미지 데이터 앞부분:", image?.map((i) => i.substring(0, 100)) ); if (image) { webviewRef.current?.postMessage( JSON.stringify({ action: "albumData", album: image }) ); navigation?.goBack(); } else { console.log("이미지 데이터 x"); } } else { const { status: newStatus } = await Camera.requestCameraPermissionsAsync(); if (newStatus !== "granted") { Alert.alert( "Camera Permission Required", "This app requires access to your camera. Please enable camera permissions in your device settings.", [ { text: "Go to Settings", onPress: () => Linking.openSettings(), }, ] ); } } };takePhoto.tsexport const takePhoto = async () => { const photo = await ImagePicker.launchCameraAsync({ quality: 1, base64: true, mediaTypes: ImagePicker.MediaTypeOptions.Images, }); if (!photo.canceled && photo.assets?.length > 0) { const result = photo.assets.map((p) => { const mimeType = "image/jpeg"; return `data:${mimeType};base64,${p.base64}`; }); return result; } return null; };

[Expo] 웹앱 이미지 데이터 전송 이슈

0개의 답변

#react-native 목록