[TIL] 나홀로 일기장 만들기

나홀로 일기장 만들기 ▼

---

저번에 배웠던거를 포함해서 추가적으로

사진을 업로드하고,

사진을 db에 저장하고,

올린 파일이 코드를작성한 폴더안에 자동으로 이름을 바꿔서 들어오는 기능,

마지막으로 날짜를 사용하는 파이썬 문법을 배웠다.

사진 업로드 방법 (app.py) ▼

@app.route('/diary', methods=['POST'])
def save_diary():  # 이미지같은 파일들 업로드, 저장할때 사용
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    file = request.files["file_give"] #파일 저장하는 방법

    extension = file.filename.split('.')[-1]  # 파일 가장 마지막이름 ( . 으로 잘라서) ex) jpg,png...

    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S') #파일이름을 현재시간으로 표기해서 중복되지 않게

    filename = f'file-{mytime}' #파일이름을 현재시간으로

    save_to = f'static/{filename}.{extension}' 
    #static폴더에 저장하는데 파일명을 현재시간.확장자명 으로 저장하기
    
    file.save(save_to)
	
    #db에 저장
    doc = {
        'title': title_receive,
        'content': content_receive,
        'file': f'{filename}.{extension}',
    }

    db.diary.insert_one(doc)


    return jsonify({'msg': '저장 완료!'})

사진 업로드 AJAX

function posting() { // 사진파일 저장한거 클라이언트 쪽 보내기
            let title = $('#title').val()
            let content = $("#content").val()

            let file = $('#file')[0].files[0] // 사진파일 변수에 저장
            
            //파일을 올리고 저장할때는 form_data를 사용해야한다.
            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,
                // 아래 3가지는 false가 default임
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });

---

파이썬으로 사용하는 날짜 문법 ▼

파이썬에서 날짜를 사용하려면 f스트링 으로 포맷팅을 해줘야한다.

간단한 예시로,

from datetime import datetime   # 임포트를 해줘야한다.

today = datetime.now() #현재시간
mytime = today.strftime('%Y-%m-%d-%H-%M-%S') #형식지정해주기

filename = f'file-{mytime}' #f스트링 쓰는 방식(예)

print(mytime)

위와같이 사용하면된다.

이것을 이용해서 나홀로일기장 작성 시 오늘의 날짜도 함께 추가되게끔 살짝 수정을 해주었다.

#app.py
@app.route('/diary', methods=['POST'])
def save_diary():  
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    file = request.files["file_give"] 
    time = request.form['time_give'] #time_give 추가

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

    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S')
    upload_date = today.strftime('%Y.%m.%d') #올라갈 시간의 형식지정해주기

    filename = f'file-{mytime}'

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)

    doc = {
        'title': title_receive,
        'content': content_receive,
        'file': f'{filename}.{extension}',
        'time': upload_date #데이터에 지정한 형식대로 날짜 들어가게 하기
    }

    db.diary.insert_one(doc)


    return jsonify({'msg': '저장 완료!'})
    
    
    //AJAX
    function posting() { // 사진파일 저장한거 클라이언트 쪽 보내기
            let title = $('#title').val()
            let content = $("#content").val()
            let time = $("#time").val() #추가

            let file = $('#file')[0].files[0] // monet사진파일 변수에 저장
            let form_data = new FormData()

            form_data.append("file_give", file)
            form_data.append("title_give", title)
            form_data.append("content_give", content)
            form_data.append("time_give", time) #추가

            $.ajax({
                type: "POST",
                url: "/diary",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

이렇게해서 사진업로드, 사진db저장, 올린파일명을 바꿔서 코드있는폴더에 이름지정해서 저장하기, 파이썬으로 날짜,시간 사용하기를 배웠습니다.

나머지는 해봤던거라 익숙했지만, 새로운 개념들은 처음보는거라 살짝 어려웠지만 그래도 반복해서 해보니 문제없이 잘되는 것 같다.