bootstrap-wysiwyg中JS控件富文本中的圖檔由本地上傳到伺服器（阿裡雲、七牛、自己的資料庫）

一、我假設你是要儲存到自己的資料庫中（因為上傳到阿裡雲、七牛更簡單原理一樣的）

點選插入圖檔如下圖：

1、其實你插入的時候不需要做什麼處理一樣也可以插入資料庫的（但是前提你插入的那個字段必須要求足夠空間比如Mysql你要用LONGTEXT類型，否則是存不下的這樣子前台擷取的時候就取不到）原因是你儲存的時候，它把圖檔給轉換為了data:image/gif;base64,這樣子話是以一般不建議直接用，因為你可能存幾張後就會出錯了。

2、先把圖檔上傳到伺服器（你自己的）然後再修改圖檔的Url，找了好多網上的資料，感覺寫的都比較複雜，嗯這裡自己就試着寫了一個比較簡單的是利用Ajax傳到背景插入，然後這個控件自己會修改它的路徑，隻需要如下步驟：

a、打開你自己調用的bootstrap-wysiwyg.js這個檔案，我們來修改一下readFileIntoDataUrl這個方法，應該就是這個檔案的第一個方法啦，把它的先注釋了，修改為這樣子

    var readFileIntoDataUrl = function (fileInfo) {

        var form = new FormData();

        form.append("editorImage", fileInfo);

        var xhr = new XMLHttpRequest();

        xhr.open("post", "/Admin/Ajax/ajaxUploadFile", false);//這裡是你傳到背景的入庫的方法，這個方法傳回圖檔路徑就可以了

        xhr.send(form);

        return xhr.responseText;

    };

b、ajaxUploadFile這個方法要做的事情就是把擷取到的$_FILES中的圖檔入庫代碼如下：

/*背景bootstrap-wysiwyg.js上傳圖檔*/

    public function ajaxUploadFile(){

        header("content-type:text/html;charset=utf-8");

        //echo 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1508372197,632975480&fm=80';exit;

        $upload = new \Think\Upload();// 執行個體化上傳類

        $upload->maxSize   =     3145728 ;// 設定附件上傳大小

        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳類型

        $upload->rootPath  =     'Public/Uploads/'; // 設定附件上傳根目錄

        $upload->savePath  =     ''; // 設定附件上傳（子）目錄

        $upload->saveRule = uniqid;

        // 上傳檔案

        $info   =   $upload->upload($_FILES);//上傳圖檔的方法

        $imagesModel=M('maiclub_images');

        $data['image_url']=$info['editorImage']['savepath'].$info['editorImage']['savename'];

        $data['create_time']=time();

        $data['id']=null;

        if($imagesModel->add($data)) {

            echo __APP__.'/Public/Uploads/'.$data['image_url'];exit;

        }else{

            echo '入庫失敗了，聯系管理者';exit;

        }

    }

3、親測是成功的，祝你幸運，也可以成功哦。交流群：368848856嘿嘿

<a href="http://www.erdangjiade.com/source">http://www.erdangjiade.com/</a>