上篇博客介紹到如何給Flask項目加上TinyMCE編輯器
這篇就給大家講講如何用TinyMCE的插件上傳圖片的七牛
首先申請七牛的云儲存空間
需要找到幾樣東西
- ACCESS_KEY
- SECRET_KEY
- BUCKET_NAME(上傳空間名字)
- DOMAIN_NAME(外鏈域名)
需要下載一個TinyMCE的插件
https://github.com/jkgeekJack/tinymce-imageupload
拷貝到之前項目的tinymce/js/tinymce/plugins目錄下
在之前那個tinymce_setup.js加上這個補丁的名字和上傳圖片的地址
在plugins和toolbar加上imageupload
tinymce.init({
selector: '#content',
directionality:'ltr',
language:'zh_CN',
height:400,
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor',
'codesample imageupload',
],
toolbar: 'insertfile undo redo | \
styleselect | \
bold italic | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | \
link image | \
print preview media fullpage | \
forecolor backcolor emoticons |\
codesample fontsizeselect fullscreen| \
imageupload',
fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
nonbreaking_force_tab: true,
//上傳圖片的地址
imageupload_url: 'submit-image',
});
這個插件還需要依賴jquery
到該網站下載,將jquery-xxx.min.js放進static/js的下
http://jquery.com/download/
在原來的頁面上引用jquery
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/tinymce_setup.js') }}"></script>
{# 引用jquery#}
<script src="{{ url_for('static', filename='js/jquery-2.2.3.min.js') }}"></script>
</head>
<body>
<form method="post" action="">
<input class="editor" name="content" id="content">
<button type="submit">提交</button>
</form>
</body>
</html>
現在可以獲取到圖片,接下來是將圖片上傳到七牛
首先要安裝七牛的庫
pip install qiniu
接下來編寫邏輯
from flask import request
from qiniu import Auth
route('/submit-image', methods=['GET', 'POST'])
def submitImage():
file = request.files['file']
# 上傳到七牛后保存的文件名
key=str(int(time.time()))+file.filename
# print file.filename
access_key = 'your access key'
secret_key = 'your secret key'
# 構建鑒權對象
q = Auth(access_key, secret_key)
# 要上傳的空間
bucket_name = 'your bucket name'
#http://+外鏈域名
domian_name = 'your domain name'
# 生成上傳 Token，可以指定過期時間等
token = q.upload_token(bucket_name, key, 3600)
ret, info = _form_put(token, key, file.read(),params=None,
mime_type='application/octet-stream', crc=None)
print(info)
print ret['key']
return '{"error":false,"path":"'+domian_name+key+'"}'
效果圖
這里寫圖片描述
這里寫圖片描述
