在web开发过程中,文件上传是经常用到的功能,比如上传附件,上传照片等。下面我们来介绍一下利用tornado 来实现简单的文件上传功能。
普通上传
# coding: utf-8
import tornado.ioloop
import tornado.web
import shutil
import os
import json
class FileUploadHandler(tornado.web.RequestHandler):
def get(self):
self.write('''
<html>
<head><title>Upload File</title></head>
<body>
<form action='file' enctype="multipart/form-data" method='post'>
<input type='file' name='file'/><br/>
<input type='submit' value='submit'/>
</form>
</body>
</html>
''')
def post(self):
ret = {'result': 'OK'}
upload_path = os.path.join(os.path.dirname(__file__), 'files') # 文件的暂存路径
file_metas = self.request.files.get('file', None) # 提取表单中‘name’为‘file’的文件元数据
if not file_metas:
ret['result'] = 'Invalid Args'
return ret
for meta in file_metas:
filename = meta['filename']
file_path = os.path.join(upload_path, filename)
with open(file_path, 'wb') as up:
up.write(meta['body'])
# OR do other thing
self.write(json.dumps(ret))
app = tornado.web.Application([
(r'/file', FileUploadHandler),
])
if __name__ == '__main__':
app.listen()
tornado.ioloop.IOLoop.instance().start()
采用ajax上传
采用ajax上传,需要修改一下前端发送请求的方式。可参照如下方式:
<html>
<head><title>Upload File</title>
<script type="text/javascript" src="/www/static/jquery.min.js"></script>
</head>
<body>
<form id='upload' action='upload' enctype="multipart/form-data" method='post'>
<input type='file' name='file'/><br/>
<input type='button' id='submit' value='submit'/>
</form>
</body>
<script>
$('#submit').click(function(){
var form = $('form')[];
var formData = new FormData(form);
formData.append('image', $('input[type=file]')[].files[]);
$.ajax({
url: '/file/upload',
data: formData,
type: 'POST',
contentType: false,
processData: false,
success: function(data){
var obj = jQuery.parseJSON(data);
alert(obj.result);
// TODO
},
error: function(data){
var obj = jQuery.parseJSON(data);
alert(data.result);
}
})
});
</script>
</html>
注意
tornado处理文件上传时,会把整个文件放在内存中。
如果有上传大文件的需求,一般会使用nginx的文件上传模块 (第三方模块,需要编译)。