CKEditor5图片无法上传怎么办？CKEditor5图片上传PHP接口设计

给老项目换了一下CKEditor5，并使用了官方的CDN，但发现之前的文件上传接口完全不能用了。
看了很多文献，都是需要写JavaScript函数，比较麻烦，就想着看看问题到底出在哪里。
首先把接口进行了如下修改，直接把$_FILES作为返回参数。先看一下是不是上传时候出了问题。

$data = [
  "uploaded" =>1,
  "fileName" => json_encode($_FILES),
  "url" => json_encode($_FILES)
];
echo json_encode($data);

可以看到，编辑器提示图片上传成功了，查看一下图片链接地址:

%7B%22upload%22:%7B%22name%22:%22u5b6.png%22,%22type%22:%22image//png%22,%22tmp_name%22:%22D://xampp//tmp//php1FD5.tmp%22,%22error%22:0,%22size%22:4357%7D%7D

转码一下：

{“upload”:{“name”:“u5b.png”,“type”:“image//png”,“tmp_name”:“D://xampp//tmp//php1FD5.tmp”,“error”:0,“size”:4357}}

可以看到，$_FILES数组是没有问题的，文件确实是上传到服务器了。

那么问题就是出在接口上了。

从返回参数可以看出，$_FILES包含upload数组，其中包含name、type、tmp_name、error和size五个参数。

可以看出，ck编辑器使用的文件上传变量名是upload。后来发现是函数报了Notice，而CKEditor只检测是否返回规定的Json，如果有报错信息在Json之前，则无法正确返回。

Notice: A non well formed numeric value encountered in D:\xampp\htdocs\upload.php on line 27

更改了上述问题，上传成功。

下面是upload.php的代码。

<?php
//返回JSON
if($_POST){
    echo json_encode(upload($_FILES));
}
//上传文件函数
function upload($file){
    //构建上传子目录
    $timeDir = date("Y")."/".date("m")."/".date("d");
    //文件存储位置
    $uploadDir = dirname(__FILE__).'/attachment/'.$timeDir;
    $url =  './attachment/'.$timeDir."/";
    //定义文件名
    $time = date("Ymd") ."_".date("His") . floor(intval(microtime() )* 100);
    //自动创建目录
    if(!is_dir($uploadDir))
    {
        mkdir($uploadDir,0777,true);
    }
    //原文件名
    $fileName = urldecode($file['upload']['name']);
    //上传临时目录文件名
    $tmpName = $file['upload']['tmp_name'];
    //取文件扩展名jpg,gif,bmp,png
    $path_parts = pathinfo($fileName);
    $ext = $path_parts["extension"];
    $ext = strtolower($ext);//jpg,png,gif,bmp
    //只允许上传图片类型的文件
    if($ext == "jpg"
        || $ext == "jpeg"
        || $ext == "png"
        || $ext == "gif"
        || $ext == "bmp")
    {
        //文件名
        $saveFileName = $time . '.' . $ext;
        //保存路径
        $savePath = $uploadDir . "/" . $saveFileName;
        //另存为新文件名称
        if (!move_uploaded_file($tmpName,$savePath))
        {
            exit;
        }
        //构建返回数组
        $data = [
            "uploaded" => true,
            "fileName" => $saveFileName,
            "url" => $url.$saveFileName
        ];
    }

    return $data;
}

编辑器代码如下：

<div id="editor"></div>

<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/translations/zh-cn.js"></script>

<script type="module">
    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            language: 'zh-cn',
            ckfinder: {
                uploadUrl: 'upload.php',
            }
        } )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );


</script>