文档章节

ueditor在flask中的使用技巧

呵哈糊涂
 呵哈糊涂
发布于 2016/12/09 22:35
字数 583
阅读 47
收藏 0

ueditor是百度前端团队开发的一款功能比较齐全的富文本编辑器,正好项目中需要,参考了一些别人写的例子和官方文档完成了上传功能后台程序的编写:

  • 上传照片/截屏
  • 上传附件
  • 上传涂鸦
  • 上传视频

首先需要的ueditor的config进行配置(具体可参考官方文档):

# 初始化时,返回配置文件给客户端
            result = {"imageActionName": "uploadimage", # 自定义get的名字
                      "snapscreenActionName": "uploadimage",
                      "fileActionName": "uploadfile",
                      "videoActionName": "uploadvideo",
                      "scrawlActionName": "uploadscrawl",
                      "imageFieldName": "upfile",# 定义request名字
                      "fileFieldName": "upfile",
                      "videoFieldName": "upfile",
                      "scrawlFieldName": "upfile",
                      "snapscreenFieldName": "upfile",
                      "imageMaxSize": 2048000,# 定义文件的最大尺寸
                      "fileMaxSize": 51200000,
                      "videoMaxSize": 51200000,
                      "scrawlMaxSize": 2048000,
                      "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif"], # 定义上传文件的格式

                      "fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".html",
                                         ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
                                         ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
                                         ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".csv",
                                         ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md",
                                         ".xml"],
                      "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg",
                                          ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
                                          ],
                      "imageCompressEnable": True,
                      "imageCompressBorder": 1600,
                      "imageInsertAlign": "none",
                      "snapscreenInsertAlign": "none",
                      "imageUrlPrefix": "",
                      "snapscreenUrlPrefix": "",
                      "fileUrlPrefix": "",
                      "videoUrlPrefix": "",
                      "scrawlUrlPrefix": "",
                      "imagePathFormat": "",
                      "filePathFormat": "",
                      "videoPathFormat": ""
                      }

然后是对从前台接收的数据进行保存并返回对应的json

# 涂鸦处理
def upload_scrawl():
    data = base64.b64decode(request.form['upfile'])# 由于涂鸦返回的数据是base64,所以需要使用Python内置的函数base64进行解码
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + '.png'# 制作文件名
    open(r"static/upload/scrawl/{}".format(filename), 'wb').write(data) # 将文件存入static/upload/scrawl目录下,这里需要注意解码后的文件为bytes所以要用'wb'
    # 返回需要的json数据
    return {"state": "SUCCESS",
            "url": "/upload/scrawl/{}/".format(filename),
            "title": filename,
            "original": filename,
            }


# 上传视频处理
def upload_video():
    file_storage = request.files['upfile']
    name, extension = os.path.splitext(file_storage.filename) # 将文件剥离成name = xxxxxx extension = .xxx
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + extension # 获取的经过格式化的文件名
    file_path = os.path.join(r"static/upload/video/", filename)
    file_storage.save(file_path)
    return {"state": "SUCCESS",
            "url": file_path.replace('static/', '/'),
            "title": file_storage.filename,
            "original": file_storage.filename,
            }


# 上传文件处理
def upload_file():
    file_storage = request.files['upfile']
    name, extension = os.path.splitext(file_storage.filename)
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + extension
    file_path = os.path.join(r"static/upload/file/", filename)
    file_storage.save(file_path)
    return {"state": "SUCCESS",
            "url": file_path.replace('static/', '/'),
            "title": file_storage.filename,
            "original": file_storage.filename
            }


# 上传照片包含截屏处理
def upload_image():
    file_storage = request.files['upfile']
    name, extension = os.path.splitext(file_storage.filename)
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + extension
    file_path = os.path.join(r"static/upload/image/", filename)
    file_storage.save(file_path)
    return {"state": "SUCCESS",
            "url": file_path.replace('static/', '/'),
            "title": file_storage.filename,
            "original": file_storage.filename,
            "type": extension,
            "size": ""}

 

具体demo可以去我的git上看https://git.oschina.net/hehahutu/myblog.git

© 著作权归作者所有

共有 人打赏支持
呵哈糊涂
粉丝 0
博文 10
码字总数 6480
作品 0
郑州
后端工程师
私信 提问
Flask学习笔记-PyCharm配置使用Flask-Script启动以及开启Debug模式

在PyCharm中安装Flask-Script 在上一篇文章中介绍过的如何安装Flask的插件非常方便,点击“+”号检索“flask-script”安装即可。 代码中使用Flask-Script from flask.ext.script import Man...

ykbj
2016/02/22
601
2
Flask 使用小结【Updating】

1、最简单的hello world #!/usr/bin/env python encoding: utf-8 from flask import Flaskapp = Flask(name) @app.route('/')def index(): return 'hello world' if name == 'main': app.ru......

大数据之路
2013/10/24
0
0
Flask学习笔记-使用PyCharm

不得不PyCharm确实是开发Python优秀IDE,用于开发Flask更是没说的。 建议使用Pro版本,注册的问题推荐花点小钱:http://dwz.cn/2KpNib (声明:该店与本人无关) 注册成功后就可以放心使用了...

ykbj
2016/02/19
1K
8
用Docker部署Flask应用

Python Web微型框架——Flask 近几年,容器越来越火,也越来越好用,我也开始尝试使用容器来运行我的应用。本篇主要讲述如何将一个Flask应用正确地运行在Docker容器中。 创建应用 创建一个文...

一进制
2017/12/22
0
0
如何学习Python开源项目代码

阅读Python开源项目代码主要有如下三个原因: 1. 在工作过程中遇到一些问题,Google和StackOverFlow等网站找不到解决办法,只能去翻源码。 2. 对某些项目或者方向非常感兴趣,希望深入。 3....

钟声已经敲响
2016/09/12
59
0

没有更多内容

加载失败,请刷新页面

加载更多

GO redis 相关操作

在gopath 目录下安装 go get github.com/garyburd/redigo/redis package mainimport ("fmt""github.com/garyburd/redigo/redis")//定义一个全局链接池变量var pool *redis.Pool//......

汤汤圆圆
30分钟前
6
0
java8性特性,常用的lambda表达式

1、抽取多个对象中的某个属性,用数组接收 List<Student> students = new ArrayList<>(); List<String> names =students.stream().map(Student::getName).collect(Collectors.toList()); 2、......

Boss-x
31分钟前
7
0
flutter 子组件与父组件

无论是子组件还是父组件,任何时候initState()只执行一次,如果需要判断 就在build里面进行,不然无效的。

大灰狼wow
34分钟前
4
0
Rancher Labs引入全球首个多集群、多租户的Prometheus支持!

近日,Rancher Labs宣布加强对Prometheus的支持,提高Kubernetes集群的可见度。Rancher也因此成为唯一一个在多集群、多租户环境中支持Prometheus的解决方案。 Prometheus正迅速成为监控云原生...

RancherLabs
36分钟前
3
0
vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。 1. 在axiosconfig目录下的axiosConfig.js import Vue from 'vue...

peakedness丶
38分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部