DRF file upload (파일 업로드)
제목이 곧 내용. 바로 본론으로
Backend
@api_view(['POST'])
@renderer_classes((JSONRenderer,))
def signup_detail(request):
# normal data
username = request.data.get('name')
# file data
uploaded_image = request.FILES['image']
print(type(uploaded_image)) # Inmemoryuploadedfile object; supports chunks()
print(type(uploaded_image.file)) # _io.BytesIO object
print(uploaded_image.size) # 27231
print(uploaded_image.name) # x.jpg
import os
with open(os.path.join('parentdir', uploaded_image.name), mode='wb') as file:
for chunk in uploaded_image.chunks():
file.write(chunk)
return Response("your file '{0}' is uploaded!".format(uploaded_image.name))
Inmemoryuploadedfile이 chunks()함수를 제공해 편리하다.
스트림이 직접적으로 필요할 경우 .file 프로퍼티를 이용하자
*Inmemoryuploadedfile의 특징은 파일과 동급으로 처리된다 는 것으로, 이점을 이용해 파일을 저장하지 않고, AWS S3로 곧바로 파일을 보내버릴 수 있다.
boto 기준으로 key.set_contents_from_file(uploaded_file)을 사용하면 된다.
Frontend
Backend로 데이터를 전달할 방법은 2가지.
- HTML submit input 사용
- AJAX 최신 브라우저에서 지원하는 javascript객체인 FormData객체를 사용
HTML
<form id="form-signup-detail" action="url/to/django/" method="post" enctype="multipart/form-data">
<input type="text" name="name" value="name">
<input type="file" name="image">
<input type="submit" value="upload by submit">
<input id="signup-detail" type="button" value="upload by ajax">
</form>
enctype을 반드시 위와 같이 해야 한다!
action 부분을 적절하게 수정하자
이 html은 아래의 ajax의 뼈대가 되기도 하고, 낡은 브라우저 호환을 위해 submit을 통한 post도 지원한다.
javascript (AJAX 구현)
$('#signup-detail').click(function () {
$.ajax(host + 'signup/detail', {
type: 'post',
data: new FormData($('#form-signup-detail')[0]),
processData: false,
contentType: false,
comeplete: function (data, status, xhr) {
$('#input').val(data);
},
xhrFields: {withCredentials: true}
});
});
FormData 객체는 최신 브라우저만 지원함에 유의
'WebDev' 카테고리의 다른 글
Python으로 현재 컴퓨터가 EC2인지 확인하기 (0) | 2016.01.26 |
---|---|
Pynamodb Basic Tutorial (0) | 2016.01.25 |
DRF + CORS + CSRF + AJAX 하에서 개발하기 (0) | 2016.01.21 |
django login 정리 (0) | 2016.01.21 |
django CSRF disable (CSRF 해제) (0) | 2016.01.20 |