Simditor上传图片教程

我曾经说过了，最近有一个项目用了Simditor编辑器，最近我发现网上基本上所有的"Simditor上传图片"都需要修改“simditor.js”里面的代码。但我查找了大量的相关手册，发现没有必要，修改“simditor.js”，纯粹是多此一举。当然，也不排除是Simditor新版本的原因，或者老版本的Simditor也需要修改“simditor.js”。

版本：jQuery v3.5.1、Simditor v2.3.27

今天，这里主要是分享一下"Simditor上传本地图片"的一个简单原理，其实也非常的简单，我以"实战+PHP示例代码"结合的方式给大家展示一下。

在了解Simditor上传图片的时候，前提是你已经熟悉了：Simditor使用方法（快速入门教程），否则，你可能看不明白以下讲解的东西。

一、前台

我的前台是一个 upload.php 的文件，主要的代码如下：

......
  <div class="input-group mb-3">
                            <div class="col-md-12">
                                <textarea name="contents" id="editor" autofocus></textarea>
                            </div>

                        </div>
......

<script>
        toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
            'color', 'fontScale', 'ol', 'ul', 'blockquote', 'code', 'table',
            'link', 'image', 'hr',  'indent', 'outdent','alignment' ,'html'];
        var editor = new Simditor({
            textarea : $('#editor'),
            placeholder : '',
            pasteImage: true,
            toolbarFloat:true,
            toolbar : toolbar,  //工具栏
            defaultImage : '/public/images/280-210.jpg', //编辑器插入外链图片时使用的默认图片
            cleanPaste:true,
            upload : {
                url : '/admin/?action=image&type=simditor', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'upload_file', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            }
        });
    </script>
......

二、后台

我的后台图片上传提交的接口是：/admin/?action=image&type=simditor，代码如下：

if($action === 'image' && $type === 'simditor'){
    if($_FILES['upload_file']){
        $image_str_json = json_encode([
            "success" =>[
               true
            ],
            "msg" => "上传成功",
            "file_path" => "/public/uploads/images/2020/08/fujieace_com_5f3a3f7aacc62.jpg" // 是否把这些配置加入`initialPreview`。
            // 如果设置为`false`，它会重载初始预览。
            // 如果设置为`true`，它会加入初始预览之中。
            // 如果这个属性没有被设置或者没有传出，它会默认为`true`。
        ],320);
        echo $image_str_json;
        } else{
        $image_str_json = json_encode([
            "success" =>[
                false
            ],
            "msg" => "上传失败",
            "file_path" => "/public/images/280-210.jpg" // 是否把这些配置加入`initialPreview`。
            // 如果设置为`false`，它会重载初始预览。
            // 如果设置为`true`，它会加入初始预览之中。
            // 如果这个属性没有被设置或者没有传出，它会默认为`true`。
        ],320);
        echo $image_str_json;
    }
}else{
    require_once ABSPATH . '/view/404.php';
}

注意：

1、这是为了让大家更加的清楚，因此，上传成功或失败后我默认返回的图片是一个绝对的路径。主要是让大家快速看明白一个效果。

2、大家只需要在“绿颜色”的代码中写自己的逻辑代码即可！例如：接爱到的图片我通过各种判断处理再存储到磁盘上以及数据库中。

3、无论“Simditor上传图片”是成功还是失败，必须学我上面的示例代码，返回一个合格的JSON数据。