[Flask]폴더 내 이미지 DB에 저장 및 Ajax로 전송하여 JSP에 송출

기본 환경 설정

import os
from PIL import Image
import base64
from io import BytesIO
import mysql.connector
import pymysql
import time
import cv2

---

폴더 내 이미지 찾기

path = "C:\\Users\\smhrd\\Desktop\\image"
img_path_list = []
possible_img_extension = ['.jpg', '.jpeg', '.JPG', '.png']
for (root, dirs, files) in os.walk(path):
    if len(files) > 0:
        for file_name in files:
            if os.path.splitext(file_name)[1] in possible_img_extension:
                img_path = root + '/' + file_name
                img_path = img_path.replace('\\', '/')
                img_path_list.append(img_path)
                
print(img_path_list)
print(img_path_list[1])

참고 블로그)

https://bskyvision.com/entry/%EC%95%84%EC%9D%B4%EC%BD%98%EA%B3%BC-%ED%8C%8C%EB%B9%84%EC%BD%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

---

데이터 DB에 Insert

# DB 연결
mydb = mysql.connector.connect(
  host="hostURL",
    port = 포트번호,
    user="계정",
    password="계정 비밀번호",
    database="DB이름"
)
mycursor = mydb.cursor()

# tb_security_alarm_human
sql = "INSERT INTO tb_security_alarm_human(cctv_id, sah_content, sah_at, sah_read, sah_read_at, human_img_link, sah_total, u_id) VALUES(%s, %s, %s, %s, %s, %s, %s, %s)"
val = ("20231E483851250911EE894C0242AC14000B", '사람 침입!', time.strftime('%Y-%m-%d %H:%M:%S'), 'N', time.strftime('%Y-%m-%d %H:%M:%S'), img_path_list[2], 1, 'test1')

mycursor.execute(sql, val)

mydb.commit()

mydb.close()

print(mycursor.rowcount, "record inserted.")

---

비동기 Controller

// Ajax로 전송받은 데이터를 이용하여 Select 데이터 조회
@PostMapping("/getEntryLog")
	public ArrayList<tb_Security_alarm_car> entryList(@RequestParam("u_id") String u_id) {
		
//		System.out.println(u_id);
		ArrayList<tb_Security_alarm_car> entryList= sacmapper.entryLogList(u_id);
		System.out.println(entryList);
		
		return entryList;
	}


// PC에 저장된 경로로 이미지 불러오기 위한 기능
@GetMapping("/showImage.com")
	public ResponseEntity<byte[]>view(String fileName) throws Exception {
		
		//파일객체를 만들어 이미지를 접근하는 경로와 파라미터로 받은 파일이름을 넣어줘서 객체선언 
        File file= new File(fileName);
		
        //응답을 보낼때 http부분을 커스텀 마이징 해서 보내기 위하여 byte타입의 ResponseEntity 선언
		ResponseEntity<byte[]> result = null;
		
		try {
			//HttpHeaders 선언
			HttpHeaders header = new HttpHeaders();
			
            //HttpHeaders의 Content-type는 클라이언트에게 보낼 문서가 어떤종류의 문서인지 문서종류에 대한 정의
            //probeContentType()은 파일의 확장자를 이용하여 MIME타입을 알려줌
			header.add("Content-type", Files.probeContentType(file.toPath()));
			
            //FileCopyUtils.copyToByteArray 는 대상 파일을 복사하여 Byte 배열로 반환해주는 클래스임.
            //HttpStatus.OK는 이작업이 잘 완료 되었다면 200 ok 사인을 보내라!
			result = new ResponseEntity<>(FileCopyUtils.copyToByteArray(file), header, HttpStatus.OK);
			
		}catch (IOException e) {
			e.printStackTrace();
		}
		
        //마지막에 http정의 해준 부분을 넣어줌
		return result;
	}

 

Ajax

$("#entryLog").click(function(){
	console.log(data);
	$.ajax({
		url:'getEntryLog',
		type: 'post',
		data : {'u_id':data},
		dataType : 'json',
		success:function(res){
			/*console.log(res);*/
			console.log(res[0].sac_img_link);
			for(let i = 0; i < res.length; i++){
						$('#page3-content').append(
								`<table>
									<tr>
										<td>자동차 이미지</td>
										<td>자동차 번호</td>
										<td>차량 출입 시간</td>
									<tr>
									<tr>
										<td><img src="showImage.com?fileName=${res[i].sac_img_link}"></td>
										<td>${res[i].car_num}</td>
										<td>${res[i].car_inout_at}</td>
									</tr>
								</table>`)
					}
		},
		error : function(){
			console.log('실패');
		}
	})
});

 

 

참고 블로그)

https://cbn1218.tistory.com/36#google_vignette

---

실행 화면