종합반 플러스 - 1주차 - 파일 업로드

Python Flask 를 이용해서 서버를 만들고

데이터를 Mongo DB에 넣는다(Robo 3T)

 

1. HTML, CSS, JS 로 기본 틀을 구축

2. Python 파일에서 Flask로 서버를 구축

3. 서버(python) 과 클라이언트(html) 연결 코드를 만든다 

 - POST, GET

 - POST 할때는 DB에 POST했다가 GET 할때는 다시 DB에서 GET 해서 정보를 보여준다.

** 여기까지는 배운 내용.

4. 파일 업로드를 만들 예정

 - 역시 틀부터 잡아야 함

 - Static 폴더가 image를 관리하는 폴더

 - 이미지 파일이므로 img 태그를 이용해서 태그르 하나 만든다

 - src 는 static 폴더에 아무 이미지나 넣어두고 주소를 준다.

 - 부트스트랩에서 파일업로드 관련 코드

                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="file">
                    <label class="custom-file-label" for="file">Choose file</label>
                </div>

- 파일 업로드 라이브러리도 추가해야한다

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

- 파일 업로드 코드 를 추가한다 - 부트스트랩 라이브러리를 만든사람이 만들어놓은 코드

        $(document).ready(function () {
            bsCustomFileInput.init() // 파일 업로드 코드
            listing();
        })

 코드의 목적은 파일을 올릴때 

저 부분에 파일 이름이 보이게 해준다.

 

- 서버쪽에서 파일 업로드한 내용을 DB로 POST 가능하게 하는 코드

@app.route('/diary', methods=['POST'])
def save_diary():
    # DB로 title 과 content를 보낸다
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    # file을 보낼 준비
    file = request.files["file_give"]
    extension = file.filename.split('.')[-1]

    #현재시간을 가져오는 함수
    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S')
    uploaddate = today.strftime('%Y-%m-%d')

    # 파일의 이름은 file-현재시간을 붙힌다
    filename = f'file-{mytime}'

    # 파일의 경로
    save_to = f'static/{filename}.{extension}'

    # 내가 save_to 라는 파일을 저장할거다
    file.save(save_to)

    # DB 에 저장할 키와 value
    doc = {
        'title': title_receive,
        'content': content_receive,
        'file': f'{filename}.{extension}',
        'time': f'{uploaddate}'
    }
    # DB로 보내기
    db.diary.insert_one(doc)
    return jsonify({'msg': '저장완료'})

- 클라이언트 쪽에서 서버에 POST해줄 내용 코드

 function posting() {
            // title, content 받아와서 저장
            let title = $('#title').val()
            let content = $("#content").val()

            // file을 가져와서 저장 // $('#file')[0] - html tag들을 가져옴, files[0] - 파일갯수를 가져옴(제일첫번째)
            let file = $('#file')[0].files[0]
            let form_data = new FormData()

            // file이기 때문에 form_data를 사용해서 보내야한다.
            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,
                // 아래 새줄은 default로 false를 준다고 생각하기 file 업로드때는
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

 - Get부분은 똑같다, 그냥 db로부터 for loop으로 key를 찾아서 빼주면 된다.

function listing(){
            $.ajax({
                type: "GET",
                url: "/diary?sample_give=샘플데이터",
                data: {},
                success: function (response) {
                    let diaries = response['all_diary'];
                    for(let i = 0; i < diaries.length; ++i){
                        let title = diaries[i]['title']
                        let content = diaries[i]['content']
                        let file = diaries[i]['file']
                        let time = diaries[i]['time']

                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <img src="../static/${file}" class="card-img-top">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${content}</p>
                                                <p class="card-text">${time}</p>
                                            </div>
                                        </div>`

                        $('#cards-box').append(temp_html);
                    }
                }
            })
        }

그 외에는 AWS 설정후 파일질라를 통해서 파일을 옮기고 git bash 명령어로 서버를 열어주고, 내 python파일을 실행하면 된다.

 

############# 명령어################
ls - 현재폴더 확인
cd 폴더명 - 폴더로 진입
cd .. - 폴더 밖으로 나가기
python app.py - 앱 실행
nohup python app.py & - 서버 git bash로 안키고도 계속 켜두기

계속 켜둔 서버 종료하기
ps -ef | grep 'python app.py' 라고 치면 내 pid가 나옴 켜져있는거
kill -9 내pid 쳐주면 종료