目的:
Tornado 返回圖片地址
過程:
1、Layui前端上傳圖片JS
//普通圖片上傳
upload.render({
elem: '#test1'
, url: 'http://xx.xx.xx.xx:xxx/api/images' // 上傳地址
, data: {'access_token': data[0]['token']}
, auto: false //選擇文件後不自動上傳
, bindAction: '#layuiadmin-app-form-submit' //“上傳”按鈕的ID
, choose: function (obj) {
//預讀本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //圖片鏈接(base64)
document.getElementById('demoText').innerHTML = file.name
});
}
, done: function (res) {
if (res.code === 0) {
layer.msg(res.data);
} else {
layer.msg(res.data);
}
}
, error: function () {
//演示失敗狀態,並實現重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
2、Tornado 保存圖片地址
# 上傳頭像
class FileUploadHandler(BaseHandler):
def post(self):
token = self.get_argument('access_token')
userid = self.get_argument('userid')
res_data = deal_decode_jwt(token, self.settings['secret_key'])
if type(res_data) == dict:
size = int(self.request.headers.get('Content-Length'))
print('圖片大小:kb', size / 1000)
if size / 1000.0 > 2000:
self.write({"code": 1001, 'msg': "error", 'data': "上傳圖片不能大於2M."})
# 獲取請求裏的文件
imgfiles = self.request.files.get('file', None)
# print(imgfiles)
for file_img in imgfiles: # 可能同一個上傳的文件會有多個文件,所以要用for循環去迭代它
save_to = 'upload/{}'.format(file_img['filename'])
with open(save_to, 'wb') as f: # 二進制
f.write(file_img['body'])
# 保存圖片名到用戶表
with session_maker() as session:
data = session.query(BaseUserinfo.UserID == userid).update({'Photo': file_img['filename']})
if data != 1:
self.write({'code': 1001, 'msg': 'Error', 'data': '頭像上傳失敗'})
images_url = "http://xx.xx.xx.xx:xxxx" + 'upload/{}'.format(file_img['filename']) # 圖片文件地址
self.write({'code': 0, 'msg': "success", 'data': images_url})
else:
self.write({'code': 1001, 'msg': "error", 'data': res_data})