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;
    }
}