摘要:Thinkphp5+editormd图片上传功能开发
目录
1. editormd 同域图片上传
1.1. 前端js配置
var editor = editormd("markeditor", {
path : "/static/lib/editormd/lib/", //editormd路径
imageName:"picture", //上传图片名称
imageUpload : true, //开启图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : '图片上传地址',
});
注意:imageName字段在Editor.md源码中是不可以配置的,默认值是:editormd-image-file
通过修改源码来支持editor.md自定义配置上传图片字段。
editormd目录/plugins/image-dailog/image-dailog.js
在第30行后添加代码:
var imgName = settings.imageName || classPrefix + "image-file";
替换第54行代码为:
"<input type=\"file\" name=\"" + imgName + "\" accept=\"image/*\" />" +
替换134行代码为:
var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]");
成功解决动态配置editor.md上传图片的字段名称
1.2. 服务端处理图片上传
Thinkphp5 版图片上传处理
public function upload(){
// 获取表单上传文件,我们在前端设置的字段名为: picture ,如果没有配置字段则这里为:editormd-image-file
$file = request()->file('picture');
if(empty($file)){
$data = [
"success"=>0,
"message"=>"请选择上传的文件"
];
exit(json_encode($data));
}
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
$data = [
"success"=>1,
"message"=>"success",
"url"=>"/public/uploads/".$info->getSaveName()
];
}else{
//上传失败获取错误信息
$data = [
"success"=>0,
"message"=>$file->getError()
];
}
exit(json_encode($data));
}
2. editormd 跨域图片上传
2.1 跨域上传原理
利用 iframe 来实现,A 站 POST 到 B 站,B 站处理上传后再跳转回到 A 站的 callback 页面,callback 页面此时在 iframe 内(即同域下),再通过 window.parent 就可以操作父页面的任意元素了。
2.2 前端html配置
域名 | 地址 |
---|---|
当前域名 | http://a.lakeui.com/ |
当前域名下回调地址 | http://a.lakeui.com/callback.html |
图片上传服务器地址 | http://b.lakeui.com/uploader.php |
<form method="post" target="upload-iframe" enctype="multipart/form-data" action="ttp://b.lakeui.com/uploader.php?callback=http://a.lakeui.com/callback.html">
<input type="file" name="picture" accept="image/*" />
<input type="submit" id="submit" value="开始上传" />
</form>
<iframe name="upload-iframe" style="display:none;" frameborder="0"></iframe>
2.3 前端js配置
<script type="text/javascript">
var editor = editormd("markeditor", {
path : "/static/lib/editormd/lib/", //editormd路径
imageName:"picture", //上传图片名称
imageUpload : true, //开启图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : '图片上传地址',
crossDomainUpload : true, //开启跨越上传
uploadCallbackURL : "http://xxxxxx/upload_callback.html?test=dfdf" //上传成功callback地址
});
var query = {};
var urlParams = window.location.search.split('?')[1];
urlParams = urlParams.split("&");
for (var i = 0; i< urlParams.length; i++) {
var param = urlParams[i].split("=");
query[param[0]] = param[1];
}
var imageDialog = window.parent.document.getElementById(query['dialog_id']);
</script>
2.4 跨域上传服务器处理
public function upload(){
header("Access-Control-Allow-Origin: *"); //允许跨域
//上传代码参考上面...
$callback = $_GET['callback'];
$code = 1; //上传成功 1 失败 0
$msg = 'success'; //提示消息
$url = '图片地址';
$location = "{$callback}?success={$code}&message={$msg}&url={$url}";
header('location:' . $location);
exit;
}
结束语
其实这些官方demo里面都有提供,感兴趣自己也可以深入研究!接下来我会整理一些常见的问题出一篇文章
手机扫码阅读,舒服~