ckeditor上传图片是报错:[Errno 2] No such file or directory: '/the/uploaded/directory\\jessie.jpg'

大家好! 上一次为我的小项目添加了ckeditor富文本编辑器,这次想要在这个编辑器里面添加图片上传功能,我按照如下方法进行了尝试:


-因为我的ckeditor版本为4, 因此就按照上面帖子提到的ckeditor版本小于4.5的方法进行了尝试:

from flask import send_from_directory

app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'  # this value can be endpoint or url

@app.route('/files/<filename>')
def uploaded_files(filename):
    path = '/the/uploaded/directory'
    return send_from_directory(path, filename)

@app.route('/upload', methods=['POST'])
@ckeditor.uploader
def upload():
    f = request.files.get('upload')
    f.save(os.path.join('/the/uploaded/directory', f.filename))
    url = url_for('uploaded_files', filename=f.filename)
    return url

-按照如上方法进行了尝试以后,我发现编辑器确实添加了图片长传键,但是在点击“上传到服务器” 按钮时,网页弹窗显示HTTP错误,后台显示如下报错信息:
FileNotFoundError: [Errno 2] No such file or directory: '/the/uploaded/directory\\jessie.jpg'

-我的完整代码如下:

谢谢!!

从你的报错信息中可以看到,我猜测是因为路径导致的。
windows的路径格式反斜杠\, 而Linux系统中则是斜杠/
你可以先根据这个来尝试修改看看~

这里的路径的值只是一个示例:

path = '/the/uploaded/directory'

你需要把它替换成你文件实际保存的目录。

比如你想要保存到项目根目录的 uploads 文件夹,先手动创建这个文件夹,然后在文件中定位到这个文件夹的路径,保存到一个配置(或是全局变量)里。然后在上传和下载的两处引用这个路径。

import os

basedir = os.path.abspath(os.path.dirname(__file__))

upload_path = os.path.join(basedir, 'uploads')

这里的 basedir 会是当前脚本所在目录的绝对路径,upload_path 是指向上传文件夹的路径。

Okok 谢谢你我试试看 :smiling_face_with_three_hearts:

太详细了太详细了~我去试试看你的方法,下次告诉你结果哈~谢谢谢谢,找工作加油 :smiling_face_with_three_hearts:

1 Like

你好Grey~
使用了你的方法这个路径问题 已经得到解决了!!但是解决了一个新的问题又出现了一个服务器响应的问题 :sob:

按照你的方法虽然解决了上传的问题,图片也可以上传到后台的uploads文件夹,但是再次点击“上传到服务器”按钮时,弹窗显示“不正确的服务器响应” , 即图片下载的问题仍然存在,后台报错信息为:
127.0.0.1 - - [12/Dec/2021 14:45:55] "POST /upload HTTP/1.1" 200 -

为了尝试解决这个问题,首先我按照如下帖子提供的“第二步”方法进行了尝试:
https://blog.csdn.net/weixin_38639882/article/details/81329885

根据如上提供的方法,操作如下:

  1. 首先找到ckeditor/config.js, 将文件内容删除后,定义了本地接收图片的接口:

      CKEDITOR.editorConfig = function( config ) {
    

    config.filebrowserImageUploadUrl = ‘./flaskhotpot/uploads?type=image’;
    };

  2. 返回js代码,接收保存完图片的反馈,根据如上方法,我把新版本以及旧版本返回js代码的方法都尝试了一遍,仍然没有解决图片下载的问题:

a. 新版本返回js代码:
> {

             "uploaded": 1,   
             "fileName": filename, 
             "url": url  
    }

b. 旧版本返回js代码:
callback = request.args.get(“CKEditorFuncNum”)

resData = "<script type=\"text/javascript\">"
resData += "window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + url + "',''" + ")" 
resData += "</script>"
return resData
  1. 因为我的编辑器版本为CKeditor4,因此我也有稍微参考了一下CKeditor官网上的说明:
    https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html

5.由于尝试以上方法不成功,因此我把ckeditor/config.js 文件夹内容还原了,这个项目新的仓库代码如下:

请有时间帮忙看看,谢谢!

CKEditor 4.5 之前和之后版本的上传视图函数的写法是不一样的,你的实际写法是 4.5 之前版本,但你使用的 CKEditor 版本似乎是大于 4.5(?)。4.5 之后的写法参考文档:

https://flask-ckeditor.readthedocs.io/en/latest/plugins.html#ckeditor-4-5

啊,我一直以为我的版本是CKeditor4, 因为之前添加编辑器那一步貌似是我打开了Ckeditor4的官网,好的,那我再看一下怎么弄,谢谢你的提醒~

1 Like