在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的檔案上傳子產品 (第三方子產品,需要編譯)。