在SAE上使用Ueditor的图片上传功能
SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务。
一、开通Storage服务
在SAE控制台开通Storage服务,并新增一个domain。
二、改动Ueditor代码
Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中。上传图片的请求是由以下函数处理的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #上传附件 @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方法将文件写入硬盘。
1 2 3 4 5 6 7 8 9 10 11 | #保存上传的文件 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方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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上会产生异常)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 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'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < 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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步