上篇博客介紹到如何給Flask項(xiàng)目加上TinyMCE編輯器
這篇就給大家講講如何用TinyMCE的插件上傳圖片的七牛
首先申請七牛的云儲存空間
需要找到幾樣?xùn)|西
- ACCESS_KEY
- SECRET_KEY
- BUCKET_NAME(上傳空間名字)
- DOMAIN_NAME(外鏈域名)
需要下載一個TinyMCE的插件
https://github.com/jkgeekJack/tinymce-imageupload
拷貝到之前項(xiàng)目的tinymce/js/tinymce/plugins目錄下
在之前那個tinymce_setup.js加上這個補(bǔ)丁的名字和上傳圖片的地址
在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
到該網(wǎng)站下載,將jquery-xxx.min.js放進(jìn)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>
現(xiàn)在可以獲取到圖片,接下來是將圖片上傳到七牛
首先要安裝七牛的庫
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'
# 構(gòu)建鑒權(quán)對象
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+'"}'
效果圖
這里寫圖片描述
這里寫圖片描述
