首页前端开发文章详情

Editor.md在线Markdown编辑器图片上传实战(二)

By liajitu / May 5, 2020 阅读 0 评论 0 发表于 前端开发 字数:2730 阅读时间:28秒

图片上传editormd

摘要:Thinkphp5+editormd图片上传功能开发

目录

1. editormd 同域图片上传

1.1. 前端js配置

  1. var editor = editormd("markeditor", {
  2. path : "/static/lib/editormd/lib/", //editormd路径
  3. imageName:"picture", //上传图片名称
  4. imageUpload : true, //开启图片上传
  5. imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  6. imageUploadURL : '图片上传地址',
  7. });

注意:imageName字段在Editor.md源码中是不可以配置的,默认值是:editormd-image-file

通过修改源码来支持editor.md自定义配置上传图片字段。

  1. editormd目录/plugins/image-dailog/image-dailog.js

在第30行后添加代码:

  1. var imgName = settings.imageName || classPrefix + "image-file";

替换第54行代码为:

  1. "<input type=\"file\" name=\"" + imgName + "\" accept=\"image/*\" />" +

替换134行代码为:

  1. var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]");

成功解决动态配置editor.md上传图片的字段名称

1.2. 服务端处理图片上传

Thinkphp5 版图片上传处理

  1. public function upload(){
  2. // 获取表单上传文件,我们在前端设置的字段名为: picture ,如果没有配置字段则这里为:editormd-image-file
  3. $file = request()->file('picture');
  4. if(empty($file)){
  5. $data = [
  6. "success"=>0,
  7. "message"=>"请选择上传的文件"
  8. ];
  9. exit(json_encode($data));
  10. }
  11. $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
  12. if($info){
  13. $data = [
  14. "success"=>1,
  15. "message"=>"success",
  16. "url"=>"/public/uploads/".$info->getSaveName()
  17. ];
  18. }else{
  19. //上传失败获取错误信息
  20. $data = [
  21. "success"=>0,
  22. "message"=>$file->getError()
  23. ];
  24. }
  25. exit(json_encode($data));
  26. }

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
  1. <form method="post" target="upload-iframe" enctype="multipart/form-data" action="ttp://b.lakeui.com/uploader.php?callback=http://a.lakeui.com/callback.html">
  2. <input type="file" name="picture" accept="image/*" />
  3. <input type="submit" id="submit" value="开始上传" />
  4. </form>
  5. <iframe name="upload-iframe" style="display:none;" frameborder="0"></iframe>

2.3 前端js配置

  1. <script type="text/javascript">
  2. var editor = editormd("markeditor", {
  3. path : "/static/lib/editormd/lib/", //editormd路径
  4. imageName:"picture", //上传图片名称
  5. imageUpload : true, //开启图片上传
  6. imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  7. imageUploadURL : '图片上传地址',
  8. crossDomainUpload : true, //开启跨越上传
  9. uploadCallbackURL : "http://xxxxxx/upload_callback.html?test=dfdf" //上传成功callback地址
  10. });
  11. var query = {};
  12. var urlParams = window.location.search.split('?')[1];
  13. urlParams = urlParams.split("&");
  14. for (var i = 0; i< urlParams.length; i++) {
  15. var param = urlParams[i].split("=");
  16. query[param[0]] = param[1];
  17. }
  18. var imageDialog = window.parent.document.getElementById(query['dialog_id']);
  19. </script>

2.4 跨域上传服务器处理

  1. public function upload(){
  2. header("Access-Control-Allow-Origin: *"); //允许跨域
  3. //上传代码参考上面...
  4. $callback = $_GET['callback'];
  5. $code = 1; //上传成功 1 失败 0
  6. $msg = 'success'; //提示消息
  7. $url = '图片地址';
  8. $location = "{$callback}?success={$code}&message={$msg}&url={$url}";
  9. header('location:' . $location);
  10. exit;
  11. }

结束语

其实这些官方demo里面都有提供,感兴趣自己也可以深入研究!接下来我会整理一些常见的问题出一篇文章

手机扫码阅读,舒服~

⌘ + Return 发表
最新 最早 全部评论0 条评论