在SAE上使用Ueditor的图片上传功能
SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务。
一、开通Storage服务
在SAE控制台开通Storage服务,并新增一个domain。
二、改动Ueditor代码
Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中。上传图片的请求是由以下函数处理的
#上传附件
@csrf_exempt
def UploadFile(request,uploadtype,uploadpath):
'''
省略若干代码
'''
#检測保存路径是否存在,假设不存在则须要创建
OutputPath=os.path.join(USettings.gSettings.MEDIA_ROOT,os.path.dirname(uploadpath)).replace("//","/")
if not os.path.exists(OutputPath):
os.makedirs(OutputPath)
#要保存的文件名称格式使用"原文件名称_当前时间.扩展名"
OutputFile=GenerateRndFilename(file.name)
#全部检測完毕后写入文件
if state=="SUCCESS":
#保存到文件里
state=SaveUploadFile(file,os.path.join(OutputPath,OutputFile))
#返回数据
if uploadtype=="image" or uploadtype=="scrawlbg":
rInfo={
'url' :OutputFile, #保存后的文件名称称
'title' :request.POST.get("pictitle",file.name),
'original' :file.name, #原始文件名称
'state' :state
}
else:
rInfo={
'url' :OutputFile, #保存后的文件名称称
'original' :file.name, #原始文件名称
'filetype' :original_ext,
'state' :state
}
'''
省略若干代码
'''
在进行一系列检查后调用SaveUploadFile方法将文件写入硬盘。
#保存上传的文件
def SaveUploadFile(PostFile,FilePath):
try:
f = open(FilePath, 'wb')
for chunk in PostFile.chunks():
f.write(chunk)
except MyException,E:
f.close()
return u"写入文件错误:"+ E.message
f.close()
return u"SUCCESS"
最后其会将图片的本地路径当做url返回给浏览器,然后浏览器就会把url插入编辑器中。
因此我们须要改动例如以下三处代码:
1、SaveUploadFile方法
def SaveUploadFile(PostFile, path):
try:
import sae.const
access_key = sae.const.ACCESS_KEY
secret_key = sae.const.SECRET_KEY
appname = sae.const.APP_NAME
domain_name = "你的domain"
import sae.storage
s = sae.storage.Client()
ob = sae.storage.Object(PostFile)
#此处返回的url是文件在Storage上的url
url = s.put(domain_name, path, ob)
return u'SUCCESS', url
except Exception,e:
return u'上传文件到sae失败',''
2、UploadFile方法
由于文件上传到SAE Storage后url会跟本地的情况不一样。所以我们还要用SaveUploadFile返回的url替换原来当做url返回给浏览器的OutputFile。除此之外还要将校验本地目录是否存在的代码移除(否则在SAE上会产生异常)。
def UploadFile(request,uploadtype,uploadpath):
'''
省略...
'''
#检測保存路径是否存在,假设不存在则须要创建
OutputPath=os.path.join(USettings.gSettings.MEDIA_ROOT,
os.path.dirname(uploadpath)).replace("//","/")
#将以下两行凝视掉
#if not os.path.exists(OutputPath):
# os.makedirs(OutputPath)
#要保存的文件名称格式使用"原文件名称_当前时间.扩展名"
OutputFile=GenerateRndFilename(file.name)
#全部检測完毕后写入文件
if state=="SUCCESS":
#保存到文件里
'注意此处'
state, url=SaveUploadFile(file,os.path.join(OutputPath,OutputFile))
#返回数据 if uploadtype=="image" or uploadtype=="scrawlbg":
rInfo={
#注意此处
'url' :url, #保存后的文件名称称
'title' :request.POST.get("pictitle",file.name),
'original' :file.name, #原始文件名称
'state' :state
}
else:
rInfo={
#注意此处
'url' :url, #保存后的文件名称称
'original' :file.name, #原始文件名称
'filetype' :original_ext,
'state' :state
}
'''
省略...
'''
3、html模板
然后还须要将ueditor.html改动成以下的样子。否则Ueditor会在server返回的URL前面加上你的'MEDIA_ROOT'
<textarea name={{ UEditor.name }} id=id_{{ UEditor.name }}
style="display:inline-block;width:{{ UEditor.width }}px;
{{ UEditor.css }}">{{UEditor.value}}</textarea>
<script type="text/javascript">
var id_{{ UEditor.name }}= new baidu.editor.ui.Editor({
"UEDITOR_HOME_URL":"{{ STATIC_URL }}ueditor/",
{% ifnotequal UEditor.toolbars None %}"toolbars":
{{ UEditor.toolbars|safe }},{% endifnotequal %}
"imageUrl":"/ueditor/ImageUp/{{ UEditor.imagePath }}",
"imagePath":"",
"scrawlUrl":"/ueditor/scrawlUp/{{ UEditor.scrawlPath }}",
"scrawlPath":"",
"imageManagerUrl":"/ueditor/ImageManager/{{ UEditor.imageManagerPath }}",
"imageManagerPath":"{{ MEDIA_URL }}{{ UEditor.imageManagerPath }}",
"catcherUrl":"/ueditor/RemoteCatchImage/{{ UEditor.imagePath }}",
"catcherPath":"",
"fileUrl":"/ueditor/FileUp/{{ UEditor.filePath }}",
"filePath":"",
"getMovieUrl":"/ueditor/SearchMovie/"
{% ifnotequal UEditor.options '' %},{{ UEditor.options|safe }}{% endifnotequal %}
});
id_{{UEditor.name}}.render('id_{{ UEditor.name }}');
id_{{UEditor.name}}.addListener('ready',function(){
id_{{UEditor.name}}.setHeight({{ UEditor.height }});
});
</script>
这样你就能够在SAE上通过Ueditor将图片上传到SAE Storage上去了。
转载需注明本文地址:http://mushapi.sinaapp.com/use-ueditor-on-sae.html
在SAE上使用Ueditor的图片上传功能的更多相关文章
- uEditor独立图片上传
项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- 有关于weiphp2.00611上传sae的一些注意(图片上传解决方案)
一.安装中注意的事项 安装时使用的系统为weiphp2.0611 版本 1.将所有文件上传到代码库中 2.按照步骤进行安装weiphp,注意在数据库导入的时候需要手动导入. ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 部署新浪SAE web.py Session及图片上传等问题注意事项
1.以下几条代码解决编码问题 import sysreload(sys)sys.setdefaultencoding('utf-8') 2.图片上传问题 需要开通sina的Storage服务,随便建个 ...
- 单独调用Ueditor的图片上传功能
<!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- UEditor使用------图片上传与springMVC集成 完整实例
UEditor是一个很强大的在线编辑软件 ,首先讲一下 基本的配置使用 ,如果已经会的同学可以直接跳过此节 ,今天篇文章重点说图片上传; 一 富文本的初始化使用: 1 首先将UEditor从官网下载 ...
- 百度ueditor的图片上传,前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
随机推荐
- 关于类和对象的进一步讨论 C++
如果一个类中所有成员函数都是公用的,则可以在定义对象时对数据成员进行初始化: class Time { public: hour; minute; sec; }; Time t1={14,15,23 ...
- Nginx调优实战
Nginx配置文件性能微调 全局的配置 user www-data; pid /var/run/nginx.pid; worker_processes auto; worker_rlimit_nofi ...
- php gd
imagecopy() 函数用于拷贝图像或图像的一部分. imagecopyresized() 函数用于拷贝部分图像并调整大小. imagecopy() imagecopy() 函数用于拷贝图像或图像 ...
- js设计模式-组合模式
组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. ...
- Python中断言与异常的区别
异常,在程序运行时出现非正常情况时会被抛出,比如常见的名称错误.键错误等. 异常: >>> s Traceback (most recent call last): File &qu ...
- 还是UVa340
#include<stdio.h> #define maxn 1010 int main() { int num,a[maxn],i,j,b[maxn]; ; &&num) ...
- Lazy Initialization with Swift
Lazy initialization (also sometimes called lazy instantiation, or lazy loading) is a technique for d ...
- -ms-,-moz-,-webkit-,-o-含义
transform:rotate(30deg); //统一标识语句 -ms-transform:rotate(30deg); //-ms代表ie内核识别码 -moz-transform:rotate( ...
- 算法8-----Different Ways to Add Parentheses(不同括号结果)
题目: Given a string of numbers and operators, return all possible results from computing all the diff ...
- [BZOJ1999] 树网的核 [数据加强版] (树的直径)
传送门 如果只是想验证算法正确性这里是洛谷数据未加强版 Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(treenet ...