summernote 富文本编辑器上传本地图片

jQuery version: 1.12.4
Bootstrap version: 3.3.7

summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器
所以在使用summernote之前必须先引入 jquery 和 Bootstrap

<!-- css -->
<link rel="stylesheet" href="static/plugins/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="static/plugins/summernote/summernote.css">

<!-- javascript -->
<script src="static/plugins/jquery/jquery-1.12.4.min.js"></script>
<script src="static/plugins/Bootstrap/js/bootstrap.js"></script>
<script src="static/plugins/summernote/summernote.js"></script>

html 部分

<textarea id="summernote"></textarea>

javascript代码

let summer = $('#summernote');
summer.summernote({
    callbacks: {
        onImageUpload: function (files) {
            sendFile(files);
        }
    }
});

/** * 发送图片文件给服务器端 */
function sendFile(files) {
    let imageData = new FormData();
    imageData.append("imageData", files[0]);
    $.ajax({
        url: '/create/uploads', // 图片上传url
        type: 'POST',
        data: imageData,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',     // 以json的形式接收返回的数据
        // 图片上传成功
        success: function ($result) {
            let imgNode = document.createElement("img");
            imgNode.src = $result.img;
            summer.summernote('insertNode', imgNode);
        },
        // 图片上传失败
        error: function () {
            console.log('图片上传失败');
        }
    });
}

php代码( laravel)

namespace App\Http\Controllers;
use App\Note;
use Illuminate\Http\Request;
class NotesController extends Controller {
    // 上传图片
    public function uploads(Request $request) {
        // 接收数据
        $file = $request->file('imageData');
        // 判断是否上传成功
        if (!$file->isValid() ) {
            return json_encode(['status' => 0,'message' => '文件上传失败']);
        }
        // 获取文件扩展名
        $ext = $file->getClientOriginalExtension();

        // 判断文件类型是否允许
        if (! in_array($ext,['jpg','png','gif'])) {
            return json_encode(['status' => 0,'message' => '文件类型不允许']);
        }

        // 为避免一个文件夹中的文件过多和文件名重复,所以需要设置上传文件夹和文件名
        $fileName = $this->setFilePath(_UPLOADS_.'/'.date('Y_m_d'),$ext);

        // 上传文件并判断
        if ( move_uploaded_file($file->getRealPath(),$fileName) ) {
            return json_encode([
                'status'  => 1,
                'message' => '文件上传成功',
                'img'     => $fileName
            ]);
        }
    }

    /**
     * 设置文件路径和文件名称
     * @param string $path 文件要上传的目标文件夹
     * @param string $ext  文件后缀名
     * @return strint      返回完整的路径+文件名称
     */
    public function setFilePath ($path,$ext) {
        // 修正路径和文件后缀名
        $path = rtrim($path,'/').'/';
        $ext  = '.'.trim($ext,'.');
        // 设置文件名
        if (! file_exists($path)) {
            @mkdir($path);
        }
        // 设置文件名
        do{
            $fileName = time().mt_rand();
        }while( file_exists($path.$fileName.$ext) );
        return $path.$fileName.$ext;
    }
}

来源：oschina

链接：https://my.oschina.net/u/4381479/blog/3851770