在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插入编辑器中。

因此我们需要修改如下三处代码：

１、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失败',''

２、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               
        }
        
    '''
    省略...
    '''

３、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