Flutter에서 웹뷰로 이미지 업로드 하는 방법이나 원리 좀 설명 해주실 분ㅠㅠㅠ

Question

Flutter 개발 초보입니다ㅠ 우선 웹뷰는 Vue.js 기반으로 만들었고 웹서버가 따로 있는 웹앱 형식입니다. 여기에 Flutter를 이용해서 Native기능(카메라, 지도)을 추가하여 하이브리드 앱을 만들고 있는 중입니다. 웹뷰에서 native쪽에 설정한 method를 호출하는 방식 자체는 알고 있지만 네이티브에서 선택한 이미지라든지, 지도위치 좌표등 해당 데이터를 웹뷰쪽으로 넘겨주는 법을 모르겠습니다ㅠ그리고 이미지 업로드 같은 경우 웹뷰에서 input태그가 꼭 있어야 하는건지 있어야 한다면 어떤 설정들을 해야하는건지도 솔직히 잘 모르겠습니다ㅠ 전반적으로 지식이 없으니 질문 수준이 미흡해보이더라도 양해부탁드립니다ㅠ 구체적인 방법을 세세하게 알려주시진 않아도 되니 전체적인 흐름이나 원리 아니면 참고할만한 예제 사이트 같은 것이라도 추천 좀 부탁 드립니다ㅠ 제 구글링 실력이 빈약한건지 flutter 하이브리드 앱에 관한 정보가 많이 없는건지 아무리 찾아도 이해가 가능한 자료들이 없어 이렇게 선배님들의 불편을 무릎쓰고 질문올립니다ㅠ

킹포링 (INTP) · Accepted Answer

Flutter에서 웹뷰로 이미지 업로드하는 방법은 일반적으로 웹 뷰에 포함된 HTML 파일 내에 input 태그를 추가하고, Flutter의 WebView 클래스에서 이를 사용하여 이미지 파일 선택 다이얼로그를 띄우고 선택한 이미지 파일을 반환 받아서 네이티브와 통신하는 것입니다.예를 들어, Flutter에서 WebView 위젯을 구성할 때, onWebViewCreated 콜백을 사용하여 웹뷰 객체를 생성하고, 이 객체를 사용하여 JavaScript와 통신할 수 있습니다. 이것은 WebView에서 window.flutter_inappwebview.callHandler(handlerName, args) 메소드를 사용하여 호출 할 수 있습니다. 그리고 네이티브 측에서는 InAppWebView.onWebViewCreated 이벤트 핸들러에서 WebView의 초기화가 완료되었을 때, WebViewController 객체를 얻어서 JavaScript에서 호출되는 함수를 구현하고, 이를 사용하여 네이티브 측으로 데이터를 전달할 수 있습니다.아래는 Flutter의 WebView를 사용하여 이미지 파일 선택을 구현하는 간단한 예제 코드입니다.class MyHomePage extends StatefulWidget { &#64;override _MyHomePageState createState() &#61;> _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { WebViewController _controller; &#64;override Widget build(BuildContext context) { return Scaffold( body: WebView( initialUrl: 'http://www.example.com', onWebViewCreated: (WebViewController controller) { _controller &#61; controller; }, javascriptMode: JavascriptMode.unrestricted, javascriptChannels: Set.from([ JavascriptChannel( name: 'fileChooser', onMessageReceived: (JavascriptMessage message) { _getImage(); }), ]), ), ); } void _getImage() async { final ImagePicker _picker &#61; ImagePicker(); final XFile imageFile &#61; await _picker.pickImage(source: ImageSource.gallery); if (imageFile !&#61; null) { final ByteData bytes &#61; await imageFile.readAsBytes(); final String base64 &#61; base64Encode(bytes.buffer.asUint8List()); _controller.evaluateJavascript('window.uploadFile(&#34;$base64&#34;)'); } } } 이 코드는 WebView에서 window.uploadFile() 메소드를 사용하여 네이티브에 이미지 파일을 업로드하고, window.fileChooser 채널을 사용하여 Flutter의 ImagePicker를 호출합니다. 이 방법은 JavaScript와 Flutter의 상호작용을 통해 이미지를 처리하는 간단한 방법입니다.이외에도 다양한 방법으로 이미지 업로드를 구현할 수 있으며, 이에 대한 구체적인 방법은 프로젝트의 구성에 따라 다르므로, 구체적인 상황에 따라 찾아보시는 것이 좋습니다.

Flutter에서 웹뷰로 이미지 업로드 하는 방법이나 원리 좀 설명 해주실 분ㅠㅠㅠ

1개의 답변

#hybridapp 목록