[ 작업 환경 ]
Python 3.7.5
Flask 1.1.1
Werkzeug 0.16.0
해당 실습은 예시일 뿐이니 참고하여 적절한 커스터마이징 후 사용하시면 됩니다.
[ 해당 실습 목표 ]
- 이미지 파일 업로드하여 지정한 위치에 저장 및 업로드 횟수에 따라 DB 수치 조정
- 업로드된 파일 확장명 jpg 통일화
- 미리보기용(저용량용) 파일로 변환하여 추가 저장
1. upload html 페이지 작성
파일을 업로드할 수 있는 버튼 설정 및 안내 문구, 업로드 제출 버튼 생성
<!-- vim app001/templates/upload.html -->
{% extends 'layout.html' %}
{% block title %}Upload{% endblock %}
{% block content %}
<h2>Upload Test Page : {{ id }}</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
파일 업로드!
</div>
<form action="{{ url_for('upload') }}" method = "POST"
enctype = "multipart/form-data">
<input type = 'file' name = 'file' />
<input type = 'submit'/>
</form>
</body>
</html>
{% endblock %}
2. app config ['UPLOAD_FOLDER'] 위치 설정 생성
mkdir -p /img_files/original# vim app001/__init__.py
# ...
app.config['UPLOAD_FOLDER'] = '/img_files/original'
# ...
3. upload route 설정
▷ /img_files/original/ 안에 업로드된 파일들을 저장합니다.
# vim app001/routes.py
# ...
# file upload
@app.route('/upload', methods = ['GET', 'POST'])
def upload():
msg = 'Input what you want to upload'
if request.method == 'POST' and 'file' in request.files:
f = request.files['file']
filename = secure_filename(f.filename)
f.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
#return 'uploads dir -> file upload success!'
return redirect(url_for('home'))
msg = 'FAIL'
#return redirect(url_for('upload'))
return render_template('upload.html', id=msg)
4. layout 수정
Img_Upload 버튼 생성 및 활성화해줍니다.
<!-- vim app001/templates/layout.html -->
<!-- ... -->
<nav class="navtop">
<div>
<h1>Website Title</h1>
<a href="{{ url_for('home') }}"><i class="fas fa-home"></i>Home</a>
<a href="{{ url_for('profile') }}"><i class="fas fa-user-circle"></i>Profile</a>
<a href="{{ url_for('upload') }}"><i class="fas fa-user-circle"></i>Img_Upload</a>
<a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i>Logout</a>
</div>
</nav>
<!-- ... -->
5. 정상 적용 확인
- GET 요청을 하거나 업로드 파일이 없을때 FAIL
- UPLOAD SUCCESS
app001/__init__.py 안에 아래의 설정이 있기 때문에
app.config['UPLOAD_FOLDER'] = '/img_files/original'
확인해보면, 해당 경로로 업로드 성공된 파일이 저장됨을 확인할 수 있습니다.
업로드 성공시 home page가 redirect 되도록 설정하여 Home Page로 이동됩니다.
'Development > Flask with Python' 카테고리의 다른 글
| [Flask1.1] 여러 이미지 파일 불러오는 route 만들기 (0) | 2020.02.20 |
|---|---|
| [Flask1.1][Mysql] API 서버 만들기 실습 - 1 : API 서버 기본틀 만들기 (0) | 2020.02.16 |
| [Flask1.1][Mysql] Query Parameter 적용하기 예시 (0) | 2020.01.22 |
| [Solved][Flask1.1] jsonify 한글 인코딩 변경되어 비정상 출력 문제 해결 방법 2가지 (1) | 2020.01.22 |
| [Flask1.1][Mysql] 실습 - 9 : jwt 활용하여 인증 기능 추가하기 (0) | 2020.01.17 |