Summernote默认配置的添加图片是base64字符串,然而这个base64暂用字符串太长,经常是30W+的字符。存储数据厍特别占用空间。

官方提供的API没有示例,国内部分博文的瞎鸡巴写。下列代码是我参考国外文档并测试成功


$('#summernote').summernote({
    lang: 'zh-CN',
    focus: true,
        height:440,
    //调用图片上传
        onImageUpload: function (files, editor, welEditable) {
            sendFile(files[0] ,editor, welEditable);
        },

});

        //ajax上传图片
 function sendFile( file,editor, welEditable) {
    var formData = new FormData();
    formData.append("file", file);
    formData.append("src", "admin/mailbox/");
    $.ajax({
       url: "/admin/Mailbox/mail_img",//路径是你控制器中上传图片的方法,下面controller里面我会写到
       data: formData,
           cache: false,
       contentType: false,
       processData: false,
       type: 'POST',
           dataType:"json",
       success: function (data) {
        if(parseInt(data.status)==1){
             editor.insertImage(welEditable, data.data);
                }
        }
    });
}

后端代码我用的是TP5

public function mail_img(Request $request)
{
    $rootDir=dirname($_SERVER['SCRIPT_FILENAME']).'/static/uploads/';
    $src="/admin/mailbox";

    if(!empty($_FILES)){

        if($_FILES['file']['size']>4194304){
            die(json_encode(['status'=>0,"msg"=>"文件大于4MB"]));
        }

        $extension=pathinfo($_FILES['file']["name"]);

        if(is_uploaded_file($_FILES['file']["tmp_name"])){
            $fileName=time()."@".md5($_FILES['file']["name"].time()).'.'.$extension['extension'];
            $path=$rootDir.ltrim($src,'/')."/".date('Ymd',time())."/";
            if (!file_exists($path)) {
                @mkdir($path,0777,true);

            }
            $bool=@rename($_FILES['file']["tmp_name"],$path.$fileName);

            if($bool){
                $newPath=str_replace(dirname($_SERVER['SCRIPT_FILENAME']),"",$path);
                die(json_encode(['status'=>1,"msg"=>"上传成功","data"=>$newPath.$fileName]));
            }else{
                die(json_encode(['status'=>0,"msg"=>"上传失败"]));
            }
        }
    }

}
Last modification:January 11, 2020
如果觉得我的文章对你有用,请随意赞赏