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"=>"上传失败"]));
}
}
}
}