[Flask].이미지 데이터를 post 형식으로 flask 서버로 보내는 방법( 이상한 트릭)
먼저 문제에 대해서 정의해보자.
문제는 새로고침을 하면서 발생한다.
이런 식으로 사용자가 촬영한 이미지와 저장되어있는 이미지를 받아서 처리해주는 서비스를 만드는 데
업로드한 이미지는 base64 의 형태로 저장되고 이것을 post 방식으로 전달해서
python 으로 처리해줘야한다.
2020/11/25 - [Data Science/Computer Vision] - [이미지 전처리]. image to base64 , base64 to image 변환하는 방법
[이미지 전처리]. image to base64 , base64 to image 변환하는 방법
image to base64 , base64 to image 변환하는 방법 본래 html 에 있는 이미지들의 src를 보면 대부분 로컬주소가 들어있거나 url 주소가 들어있다. 하지만 우리는 사용자가 업로드한 이미지에 대한 처
acdongpgm.tistory.com
그러나 post 방식을 사용하니까 페이지가 새로고침되고
새로고침이 되면 업로드된 이미지가 없어지고 다시 위의 저 모양으로 바뀐다!!
|
|
데이터는 전달하지만 전에 전달했던 이미지가 사라져버리는 문제발생.
그래서 새로고침을 막는 방법을 계속고집하다가 해결되지 않아
야매(트릭)를 사용해보기로 했다.
프로그래머는 어떻게든 구현하면 된다. 잔머리 발동.
나의 구상은 이렇다.
html 속성에는 hidden 이라는 속성이있다. 실제론 존재하지만 사용자에겐 보이지 않는 속성이다.
이것을 통해서 트릭을 구현한다.
1. 업로드한 데이터의 src의 값을 value에 똑같이 복사한다.
* reader.onload 함수는 이미지가 업로드 되었을 때 호출되는 함수이다.
업로드한 이미지에 value 속성이 추가되고 거기에 base64의 값이 추가된다
2. POST방식으로 보내기위해 form tag에도 값을 전달한다.
3. submit으로 test필드의 이미지 데이터 전송
4. 데이터를 전송하고 나온 base64 값을 텍스트 필드의 다시 뿌려준다.
임의의 인풋필드를 hidden 속성으로 만들고 거기다가 전에 전송했던 이미지 데이터를 다시 뿌려준다.
5.전송한 이미지 데이터를 src 값에 대입시켜줘서
새로고침은 되지만 분석한 이미지는 그대로 보이도록 하는 트릭을 만든다.
이렇게 하면 새로고침을 하지만 그전의 데이터가 남아있는다 사실은 데이터가 전송되었다가 다시 나와서 그 자리로 돌아오는 것이지만 사용자는 느끼지 못하겠지.. ㅎㅎ
대충 설명은 했지만 나도 사실 어떻게 짯는 지 모르겠다.
이래서 코딩을 할 때 충분한 설계를 하고 짜야하고 로직을 정리해야한다.
로직을 정리하기 위해서 이 포스트를 올리는 건데 정리하고나니 더 해깔린다...
확실한건 포스트 방식을 할 때 무조건 새로고침이 발생하고 그 새로고침을 막는 방법말고
데이터를 전송하고 받은 데이터를 다시 이미지 주소로 대입시켜주는 과정에서
중간에 submit 전송을 하기 위한 input 필드 말고도
임의의 text 필드를 통해 잠시 데이터를 담아두는 통을 만들고 hidden 처리했다.
당연히 간단하고 이해하기 쉬운 방벙이 있을 것이지만 일단 이걸로 때우자 ㅋㅋ...