html 의 form 태그로 전송한 파일을 Flask 서버에서 받아 저장해보자.
<!-- form.html -->
<!DOCTYPE html>
<html>
<head>
<script src="form.js" defer></script>
</head>
<body>
<h1>파일 업로드</h1>
<form id="file-form"
action="http://localhost:5000/upload"
method="POST"
enctype="multipart/form-data"
target='blankifr'>
<input type="file" name='file' multiple />
<button id="file-submit" type="button">UPLOAD</button>
</form>
</body>
<iframe name='blankifr' style='display:none;'></iframe>
</html>// form.js
const submit_form = document.querySelector("#file-form")
const submit_btn = document.querySelector('#file-submit')
submit_btn.addEventListener('click', function () {
submit_form.submit()
})form 태그를 통해서 action 의 경로로 파일을 보낼 수 있다.
<!-- form.html -->
<form id="file-form"
action="http://localhost:5000/upload"
method="POST"
enctype="multipart/form-data"
target='blankifr'> action 은 파일이 전송될 경로,
method 는 파일을 Flask 서버로 보낼 것이기 때문에 POST
enctype 은 단순 텍스트가 아닌, 이미지 등을 전송할 것이기 때문에 "multipart/form-data" target 은 이미지 전환 방지 참고
이제 Flask 서버에서 form 이 보낸 파일들을 받아보자.
request.files.getlist('file') 를 사용하면 된다.
매개 변수 'file' 은 파일을 업로드할 때 사용한 input의 name 값으로 사용해야 한다.
<!-- form.html -->
<input type="file" name='file' multiple />Flaks 서버의 코드이다.
# app.py
from flask import Flask, request
app = Flask(__name__)
@app.route('/upload', methods=['GET', 'POST'])
def uploading():
if request.method == 'POST':
print('POST')
files = request.files.getlist('file')
for f in files:
f.save('./files/' + f.filename)
return 'done!'
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000, debug=True)파일을 업로드하면,
정상적으로 files 폴더 내부에 업로드한 파일이 생성된다.
틈틈히 공부 홀릭
업로드한 파일을 수정해서 보여주는 사이트를 보여주고 싶은데
사용자가 업로드한 파일을 어떻게 변수로 지정할 수 있을까요??