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

Steak Overcooked
, ,
1

大家好！ 上一次为我的小项目添加了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'

-我的完整代码如下：

谢谢！！

2

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

3

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

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 是指向上传文件夹的路径。

4

Okok 谢谢你我试试看 :smiling_face_with_three_hearts:

5

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

1 个赞
6

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

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

为了尝试解决这个问题，首先我按照如下帖子提供的“第二步”方法进行了尝试：

根据如上提供的方法，操作如下：

  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官网上的说明：
    Uploading Dropped or Pasted Files | CKEditor 4 Documentation

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

请有时间帮忙看看，谢谢！

7

CKEditor 4.5 之前和之后版本的上传视图函数的写法是不一样的，你的实际写法是 4.5 之前版本，但你使用的 CKEditor 版本似乎是大于 4.5（？）。4.5 之后的写法参考文档：

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

8

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

1 个赞