21.flask上传文件到第三方

前言

使用flask搭建&＃xff0c;富文本编辑器采用neditor&＃xff0c;neditor是基于ueditor开发的&＃xff0c;markdown采用editor.md

一般需求有两种

• 配置富文本编辑器进行图片上传
• 单独实现图片上传

完整实例

使用七牛云

注册账号

主页

获取密钥

创建密钥

在后面会用到密钥

创建存储对象

这是测试域名&＃xff0c;后面会用到。

如何使用js和七牛云返回的token进行图片上传

生成token

# 获取七牛云token
&＃64;app.route(&＃39;/uptoken/&＃39;)
def uptoken():# AKaccess_key &＃61; config.UEDITOR_QINIU_ACCESS_KEY# SKsecret_key &＃61; config.UEDITOR_QINIU_SECRET_KEY# 验证q &＃61; qiniu.Auth(access_key,secret_key)# 储存空间名字bucket &＃61; config.UEDITOR_QINIU_BUCKET_NAME# tokentoken &＃61; q.upload_token(bucket)return jsonify({"uptoken":token})


上传图片





上传文件




window.onload &＃61; function () {var img_kind &＃61; "?\t\n" &＃43;"imageMogr2/auto-orient/thumbnail/100000&＃64;/format/jpg/blur/1x0/quality/75|watermark/2/text/5aKo6Z-z/font/5qW35L2T/fontsize/600/fill/IzMxMjRDQQ&＃61;&＃61;/dissolve/43/gravity/SouthEast/dx/10/dy/10|imageslim"zlqiniu.setUp({&＃39;domain&＃39;: &＃39;http://psodtyzhu.bkt.clouddn.com/&＃39;,//这是你创建的域名&＃39;browse_btn&＃39;: &＃39;upload-btn&＃39;,//这是按钮id&＃39;uptoken_url&＃39;: &＃39;/uptoken/&＃39;,//获取后台生成的token&＃39;success&＃39;: function (up, file, info) {var domain &＃61; up.getOption(&＃39;domain&＃39;);var obj &＃61; JSON.parse(info);var image_url &＃61; domain &＃43; obj.keyconsole.log(image_url)var imageInput &＃61; document.getElementById("image-input");imageInput.value &＃61; image_url;var im &＃61; document.getElementById("img");im.setAttribute("src", image_url &＃43; img_kind);}});
}


Ueditor的使用

后台上传图片

#encoding: utf-8from flask import (Blueprint,request,jsonify,url_for,send_from_directory,current_app as app
)
import json
import re
import string
import time
import hashlib
import random
import base64
import sys
import os
import config
from urllib import parse
# 更改工作目录。这么做的目的是七牛qiniu的sdk
# 在设置缓存路径的时候默认会设置到C:/Windows/System32下面
# 会造成没有权限创建。
os.chdir(os.path.abspath(sys.path[0]))
try:import qiniu
except:pass
from io import BytesIObp &＃61; Blueprint(&＃39;editor&＃39;,__name__,url_prefix&＃61;&＃39;/editor&＃39;)UEDITOR_UPLOAD_PATH &＃61; ""
UEDITOR_UPLOAD_TO_QINIU &＃61; False
UEDITOR_QINIU_ACCESS_KEY &＃61; config.UEDITOR_QINIU_ACCESS_KEY
UEDITOR_QINIU_SECRET_KEY &＃61; config.UEDITOR_QINIU_SECRET_KEY
UEDITOR_QINIU_BUCKET_NAME &＃61; config.UEDITOR_QINIU_BUCKET_NAME
UEDITOR_QINIU_DOMAIN &＃61; config.UEDITOR_QINIU_DOMAIN
IMG_KIND &＃61; r"?imageMogr2/auto-orient/thumbnail/x175/blur/1x0/quality/75|imageslim"&＃64;bp.before_app_first_request
def before_first_request():global UEDITOR_UPLOAD_PATHglobal UEDITOR_UPLOAD_TO_QINIUglobal UEDITOR_QINIU_ACCESS_KEYglobal UEDITOR_QINIU_SECRET_KEYglobal UEDITOR_QINIU_BUCKET_NAMEglobal UEDITOR_QINIU_DOMAINglobal IMG_KINDUEDITOR_UPLOAD_PATH &＃61; app.config.get(&＃39;UEDITOR_UPLOAD_PATH&＃39;)if UEDITOR_UPLOAD_PATH and not os.path.exists(UEDITOR_UPLOAD_PATH):os.mkdir(UEDITOR_UPLOAD_PATH)UEDITOR_UPLOAD_TO_QINIU &＃61; app.config.get("UEDITOR_UPLOAD_TO_QINIU")if UEDITOR_UPLOAD_TO_QINIU:try:UEDITOR_QINIU_ACCESS_KEY &＃61; app.config["UEDITOR_QINIU_ACCESS_KEY"]UEDITOR_QINIU_SECRET_KEY &＃61; app.config["UEDITOR_QINIU_SECRET_KEY"]UEDITOR_QINIU_BUCKET_NAME &＃61; app.config["UEDITOR_QINIU_BUCKET_NAME"]UEDITOR_QINIU_DOMAIN &＃61; app.config["UEDITOR_QINIU_DOMAIN"]except Exception as e:option &＃61; e.args[0]raise RuntimeError(&＃39;请在app.config中配置%s&＃xff01;&＃39;%option)csrf &＃61; app.extensions.get(&＃39;csrf&＃39;)if csrf:csrf.exempt(upload)def _random_filename(rawfilename):letters &＃61; string.ascii_lettersrandom_filename &＃61; str(time.time()) &＃43; "".join(random.sample(letters,5))filename &＃61; hashlib.md5(random_filename.encode(&＃39;utf-8&＃39;)).hexdigest()subffix &＃61; os.path.splitext(rawfilename)[-1]return filename &＃43; subffix&＃64;bp.route(&＃39;/upload/&＃39;,methods&＃61;[&＃39;GET&＃39;,&＃39;POST&＃39;])
def upload():action &＃61; request.args.get(&＃39;action&＃39;)result &＃61; {}if action &＃61;&＃61; &＃39;config&＃39;:config_path &＃61; os.path.join(bp.static_folder or app.static_folder,&＃39;ueditor&＃39;,&＃39;config.json&＃39;)with open(config_path,&＃39;r&＃39;,encoding&＃61;&＃39;utf-8&＃39;) as fp:result &＃61; json.loads(re.sub(r&＃39;\/\*.*\*\/&＃39;,&＃39;&＃39;,fp.read()))elif action in [&＃39;uploadimage&＃39;, &＃39;uploadvideo&＃39;, &＃39;uploadfile&＃39;]:image &＃61; request.files.get("file") # neditor的参数if not image:image &＃61; request.files.get("editormd-image-file") # editor.md的参数if not image:image &＃61; request.files.get("upfile") # ueditor的参数filename &＃61; image.filenamesave_filename &＃61; _random_filename(filename)result &＃61; {&＃39;state&＃39;: &＃39;&＃39;,&＃39;url&＃39;: &＃39;&＃39;,&＃39;title&＃39;: &＃39;&＃39;,&＃39;original&＃39;: &＃39;&＃39;}if UEDITOR_UPLOAD_TO_QINIU:if not sys.modules.get(&＃39;qiniu&＃39;):raise RuntimeError(&＃39;没有导入qiniu模块&＃xff01;&＃39;)buffer &＃61; BytesIO()image.save(buffer)buffer.seek(0)q &＃61; qiniu.Auth(UEDITOR_QINIU_ACCESS_KEY, UEDITOR_QINIU_SECRET_KEY)token &＃61; q.upload_token(UEDITOR_QINIU_BUCKET_NAME)ret,info &＃61; qiniu.put_data(token,save_filename,buffer.read())if info.ok:result[&＃39;state&＃39;] &＃61; "SUCCESS"result[&＃39;url&＃39;] &＃61; parse.urljoin("http://"&＃43;config.UEDITOR_QINIU_DOMAIN,ret[&＃39;key&＃39;]&＃43;IMG_KIND)result[&＃39;title&＃39;] &＃61; ret[&＃39;key&＃39;]result[&＃39;original&＃39;] &＃61; ret[&＃39;key&＃39;]else:image.save(os.path.join(UEDITOR_UPLOAD_PATH, save_filename))result[&＃39;state&＃39;] &＃61; "SUCCESS"result[&＃39;url&＃39;] &＃61; url_for(&＃39;ueditor.files&＃39;,filename&＃61;save_filename)result[&＃39;title&＃39;] &＃61; save_filename,result[&＃39;original&＃39;] &＃61; image.filenameelif action &＃61;&＃61; &＃39;uploadscrawl&＃39;:base64data &＃61; request.form.get("upfile")img &＃61; base64.b64decode(base64data)filename &＃61; _random_filename(&＃39;xx.png&＃39;)filepath &＃61; os.path.join(UEDITOR_UPLOAD_PATH,filename)with open(filepath,&＃39;wb&＃39;) as fp:fp.write(img)result &＃61; {"state": "SUCCESS","url": url_for(&＃39;files&＃39;,filename&＃61;filename),"title": filename,"original": filename}# 这个是editor.md使用时&＃xff0c;对应参数result.update({"code":200})result.update({"success":1})result.update({"message":"成功"})return jsonify(result)&＃64;bp.route(&＃39;/files//&＃39;)
def files(filename):return send_from_directory(UEDITOR_UPLOAD_PATH,filename)


创建ueditor编辑器

• ueditor.html





点击




• ueditor.js

$(function () {var ue &＃61; UE.getEditor("editor", {&＃39;serverUrl&＃39;: &＃39;/editor/upload/&＃39;,//这个是前面定义的&＃xff0c;为了上传图片toolbars: [[&＃39;undo&＃39;, //撤销&＃39;redo&＃39;, //重做&＃39;bold&＃39;, //加粗&＃39;italic&＃39;, //斜体&＃39;blockquote&＃39;, //引用&＃39;insertcode&＃39;, //代码语言&＃39;fontfamily&＃39;, //字体&＃39;fontsize&＃39;, //字号&＃39;paragraph&＃39;, //段落格式&＃39;justifyleft&＃39;, //居左对齐&＃39;justifyright&＃39;, //居右对齐&＃39;justifycenter&＃39;, //居中对齐&＃39;justifyjustify&＃39;, //两端对齐&＃39;forecolor&＃39;, //字体颜色&＃39;backcolor&＃39;, //背景色&＃39;inserttable&＃39;, //插入表格&＃39;link&＃39;, //超链接&＃39;insertorderedlist&＃39;, //有序列表&＃39;insertunorderedlist&＃39;, //无序列表&＃39;simpleupload&＃39;, //单图上传&＃39;emotion&＃39;, //表情&＃39;searchreplace&＃39;, //查询替换&＃39;preview&＃39;,//预览&＃39;fullscreen&＃39;, //全屏&＃39;indent&＃39;, //首行缩进&＃39;snapscreen&＃39;, //截图&＃39;horizontal&＃39;, //分隔线&＃39;italic&＃39;, //斜体&＃39;underline&＃39;, //下划线&＃39;subscript&＃39;, //下标&＃39;superscript&＃39;, //上标]],autoHeight: false});$("#submit-btn").click(function (event) {event.preventDefault();var content &＃61; ue.getContent();console.log(content)})
});


• 后台设置的参数为"upfile"

基于ueditor的neditor的使用





点击




$(function () {var ue &＃61; UE.getEditor("editor", {&＃39;serverUrl&＃39;: &＃39;/editor/upload/&＃39;,toolbars: [[&＃39;undo&＃39;, //撤销&＃39;redo&＃39;, //重做&＃39;bold&＃39;, //加粗&＃39;italic&＃39;, //斜体&＃39;blockquote&＃39;, //引用&＃39;insertcode&＃39;, //代码语言&＃39;fontfamily&＃39;, //字体&＃39;fontsize&＃39;, //字号&＃39;paragraph&＃39;, //段落格式&＃39;justifyleft&＃39;, //居左对齐&＃39;justifyright&＃39;, //居右对齐&＃39;justifycenter&＃39;, //居中对齐&＃39;justifyjustify&＃39;, //两端对齐&＃39;forecolor&＃39;, //字体颜色&＃39;backcolor&＃39;, //背景色&＃39;inserttable&＃39;, //插入表格&＃39;link&＃39;, //超链接&＃39;insertorderedlist&＃39;, //有序列表&＃39;insertunorderedlist&＃39;, //无序列表&＃39;insertimage&＃39;, //多图上传&＃39;simpleupload&＃39;, //多图上传&＃39;emotion&＃39;, //表情&＃39;searchreplace&＃39;, //查询替换&＃39;preview&＃39;,//预览&＃39;fullscreen&＃39;, //全屏&＃39;indent&＃39;, //首行缩进&＃39;snapscreen&＃39;, //截图&＃39;horizontal&＃39;, //分隔线&＃39;italic&＃39;, //斜体&＃39;underline&＃39;, //下划线&＃39;subscript&＃39;, //下标&＃39;superscript&＃39;, //上标]],autoHeight: false});$("#submit-btn").click(function (event) {event.preventDefault();var content &＃61; ue.getContent();console.log(content)})
});


和ueditor是没多大区别&＃xff0c;这是不能单图上传了&＃xff0c;要使用多图上传

注意事项:

"file"是后台需要接收的参数&＃xff0c;注意

action是为了后台便于判断文件类型&＃xff0c;而设置的参数

这里后台返回的json中需要与neditor定义的接口的参数相对应&＃xff0c;不然会一直报错。

开源editor.md的使用

var testEdiadtor;$(function () {testEditor &＃61; editormd("test-editormd", {width: "90%",height: 640,syncScrolling: "single",path: "../../static/editor.md/lib/",saveHTMLToTextarea: true,fullscreen: true,tex: true, // 开启科学公式TeX语言支持&＃xff0c;默认关闭flowChart: true, // 开启流程图支持&＃xff0c;默认关闭sequenceDiagram: true, // 开启时序/序列图支持&＃xff0c;默认关闭,//dialogLockScreen : false, // 设置弹出层对话框不锁屏&＃xff0c;全局通用&＃xff0c;默认为true//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层&＃xff0c;全局通用&＃xff0c;默认为true//dialogDraggable : false, // 设置弹出层对话框不可拖动&＃xff0c;全局通用&＃xff0c;默认为true//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度&＃xff0c;全局通用&＃xff0c;默认值为0.1//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色&＃xff0c;全局通用&＃xff0c;默认为#fff//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色&＃xff0c;全局通用&＃xff0c;默认为#fffimageUpload: true,imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL: "/editor/upload/?action&＃61;" &＃43; "uploadimage",//这里上传的图片接口onload: function () {console.log(&＃39;onload&＃39;, this);this.watch().fullscreen();this.width("100%");this.height(640);this.resize("100%", 640);},toolbarIcons: function () {// Or return editormd.toolbarModes[name]; // full, simple, mini// Using "||" set icons align right.// return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "editorIcon", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]// return editormd.toolbarModes["full"]//完整工具栏//t.toolbarModes&＃61;{full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],mini:["undo","redo","|","watch","preview","|","help","info"]}//需要将自定义图标放入进来return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "clear", "search", "||", "help", "info", "editorIcon", "returnIcon", "file", "faicon",]},//设置图标文本信息toolbarIconTexts: {editorIcon: "提交", // 如果没有图标&＃xff0c;则可以这样直接插入内容&＃xff0c;可以是字符串或HTML标签returnIcon: "返回" // 如果没有图标&＃xff0c;则可以这样直接插入内容&＃xff0c;可以是字符串或HTML标签},// 用于增加自定义工具栏的功能&＃xff0c;可以直接插入HTML标签&＃xff0c;不使用默认的元素创建图标toolbarCustomIcons: {faicon: "&＃39;},// 自定义工具栏按钮的事件处理toolbarHandlers: {/*** &＃64;param {Object} cm CodeMirror对象* &＃64;param {Object} icon 图标按钮jQuery元素对象* &＃64;param {Object} cursor CodeMirror的光标对象&＃xff0c;可获取光标所在行和位置* &＃64;param {String} selection 编辑器选中的文本*/editorIcon: function (cm, icon, cursor, selection) {alert(testEditor.getHTML())},returnIcon: function (cm, icon, cursor, selection) {window.location.href &＃61; "/"}},//提示信息lang: {toolbar: {editorIcon: "提交编辑内容",returnIcon: "返回主页",undo: "撤销 (Ctrl&＃43;Z)"}},});$("#submit-btn").click(function (event) {event.preventDefault();alert(testEditor.getHTML())testEditor.getMarkdown(); // 获取 Markdown 源码testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML&＃xff0c;在开启 watch 且没有开启 saveHTMLToTextarea 时使用})
});// testEditor.gotoLine(90);//转到第90行
//
// testEditor.show();//显示编辑器
//
// testEditor.hide();//隐藏编辑器
//
// alert(testEditor.getMarkdown());//获取编辑器内容&＃xff08;不含html&＃xff09;
//
// alert(testEditor.getHTML());//获取编辑器html内容
//
// testEditor.watch();//开启双窗口对比
//
// testEditor.unwatch();//取消双窗口对比
//
// testEditor.previewing();//预览效果
//
// testEditor.fullscreen();//全屏&＃xff08;按ESC取消&＃xff09;
//
// testEditor.showToolbar();//显示工具栏
//
// testEditor.hideToolbar();//隐藏工具栏




本文链接:https://www.ngui.cc/el/1199202.html