在SAE上使用Ueditor的图片上传功能
2014-06-05 15:04
441 查看
SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务。
二、修改Ueditor代码
Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的
在进行一系列检查后调用SaveUploadFile方法将文件写入硬盘。
最后其会将图片的本地路径当做url返回给浏览器,然后浏览器就会把url插入编辑器中。
因此我们需要修改如下三处代码:
1、SaveUploadFile方法
2、UploadFile方法
因为文件上传到SAE Storage后url会跟本地的情况不一样,所以我们还要用SaveUploadFile返回的url替换原来当做url返回给浏览器的OutputFile,除此之外还要将校验本地文件夹是否存在的代码移除(否则在SAE上会产生异常)。
3、html模板
然后还需要将ueditor.html修改成下面的样子,否则Ueditor会在服务器返回的URL前面加上你的'MEDIA_ROOT'
这样你就可以在SAE上通过Ueditor将图片上传到SAE Storage上去了。
转载需注明本文地址:http://mushapi.sinaapp.com/use-ueditor-on-sae.html
一、开通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会在服务器返回的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的图片上传功能
- (3)关于ueditor中内置功能图片上传的使用
- Ueditor 编译发布后无法使用上传图片、附件等功能
- 基于SSM使用ueditor编辑框文本、图片上传功能实现
- MVC ueditor的使用(实现上传图片功能)
- 单独使用ueditor的图片上传功能,同时获得上传图片地址和缩略图
- 使用ueditor实现单独的图片上传功能
- 自动上传本地图片和word图片(word图片需使用从word粘贴功能)
- ckeditor组合ckfinder的配置使用图片上传功能
- ueditor 编辑器的配置 实现了上传图片与文件功能---附效果图
- 使用Magento导入导出功能实现批量上传带图片产品
- 百度BAE使用ueditor 上传图片
- : 使用uploadiify实现图片上传功能
- 三步在mvc中使用KindEditor开发富文本编辑器上传图片功能
- 使用KindEditor的图片上传功能,实现图片上传到专门的图片服务器。
- 单独调用Ueditor的图片和附件上传功能
- 使用百度ueditor在上传图片的时候自定义保存图片位置
- Flex中使用RemoteObject实现图片上传功能
- [PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能
- 单独使用FCKeditor的图片上传功能