9 TIL 정리(파일 업로드)

extension = file.filename.split('.')[-1]

파일업로드 기능

-프론트엔드

부트스트랩을 이용해보자! 또는 찾아보니 form 태그를 이용하기도 한다.

<input type="file" name="file" id="imageFileOpenInput" accept="image/*">

모든 이미지 파일을 허용

 

파일 업로드 라이브러리

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>

bsCustomFileInput.init()

스크립트 부분은 헤드에 넣고 아래 init은 스크립트에 넣자

예시)

 $(document).ready(function () { /*창이 로딩되는 순간 아래의 기능을 작동시켜주세요*/
            bsCustomFileInput.init()
        })

-DB를 통해 서버와 클라이언트 파일 주고받기

서버쪽

file = request.files["file_give"] /*file_give로 정보를 받아온다*/

save_to = 'static/mypicture.jpg'/*mypicture이란 이름으로 저장하는데 나중에 계속 덮어씌워지니 후에 변경할 것*/
file.save(save_to)/*파일 저장*/

클라이언트 쪽

function posting() { 
    let title = $('#title').val()
    let content = $("#content").val()

    let file = $('#file')[0].files[0] /*파일값을 불러오는 코드를 콘솔창에 찍어보자.*/
    let form_data = new FormData() /*새로운 객체 생성*/

    form_data.append("file_give", file) /*새로운 객체에 데이터 추가*/
    form_data.append("title_give", title)
    form_data.append("content_give", content)

    $.ajax({
        type: "POST",
        url: "/diary",
        data: form_data,/*폼 데이터로 보내기*/
        cache: false, /*추가적인 부분은 false처리*/
        contentType: false, /*''*/
        processData: false,/*''*/
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

f-string

myname = '홍길동'
text = f'내 이름은 {myname}입니다.'
print(text) #내 이름은 홍길동입니다

datetime

python 기본 라이브러리로 미니 프로젝트 때 사용한 적이 있다.

( https://dojang.io/mod/page/view.php?id=2463 )

날짜와 시간을 다루는 함수

임포트 먼저!

from datetime import datetime

 

-현재 날짜와 시간

now = datetime.now()
print(now)

date_time = now.strftime("%Y년 %m월 %d일 %H시 %M분 %S초")
print(date_time)
# ㅇㅇㅇㅇ년 ㅇㅇ월 ㅇㅇ일 ㅇㅇ시 ㅇㅇ분 ㅇㅇ초

 

파일 이름 중복되지 않게 저장해보기

파일 이름 중 확장자가 들어갈 수 있으니 확장자 명을 빼보자

extension = file.filename.split('.')[-1] #파일이름에서 .로 나눈뒤 마지막 문자열

새로운 이름 붙이기(현재 시간을 붙인)

today = datetime.now() #현재시간 부르기
mytime = today.strftime('%Y-%m-%d-%H-%M-%S') #시간을 ()로 표현해 주세요

filename = f'file-{mytime}' #file뒤에 시간 붙는 문자열

저장 후 DB저장

save_to = f'static/{filename}.{extension}'
file.save(save_to)
doc = {  #딕셔너리화
    'title':title_receive,
    'content':content_receive,
    'file':f'{filename}.{extension}',#file 시간과 확장자명
}
db.diary.insert_one(doc)

클라이언트에 추가할 때

<img src="../static/${file}"> <!--static폴더 안에 있는 file(이름)을 불러와-->