ZKX
首页
分类
PHP
MySQL
登录/注册
laravel 上传图片
2019-11-05
42
0
最近在自己新建的博客后台中使用Editor.md作为发布文章的编辑器,后来在做上传图片的时候遇到了一些难题,就是提交的表单中没有Token,无法通过Laravel的VerifyCsrfToken中间件检查。本文将讲解如何解决这个问题。 #### 前端js配置 ```javascript /* 配置editormd */ var editor = editormd("editormd", { path: "{{ asset('/editor.md/lib/') }}", height: 700, syncScrolling: "single", toolbarAutoFixed: false, saveHTMLToTextarea: false, imageUpload: true, imageFormats : ["jpg","jpeg","gif","png","bmp","webp"], imageUploadURL:"{{ url('/admin/editormd_upload') }}" }); ``` #### 方法和路由 ```php //editormd上传图片 public function editormd_upload_img(){ //判断是否有传文件过来 if(request()->file("editormd-image-file")){ //获取到今天的日期 $date_time=date("Ymd",time()); $dir1=public_path()."/static/upload/admin"."/".$date_time;//获取绝对路径 $dir2="upload/admin"."/".$date_time."/"; //var_dump(file_exists($dir1));exit; //检查目录是否存在,不存在创建 if(!file_exists($dir1)){ File::makeDirectory($dir1, $mode = 0777, true, true); } $file=request()->file("editormd-image-file"); //检查文件是否合法 if($file->isValid()){ $old_filename=$file->getClientOriginalName();//上传图片的文件名 $new_filename=date("YmdHis",time()).time().rand(10000,99999).".".$file->getClientOriginalExtension();//文件名+后缀 //判断文件是否存在 //var_dump(file_exists($dir1."/".$new_filename));exit; if(!file_exists($dir1."/".$new_filename)){ //不存在,创建文件 if($file->move($dir1,$new_filename)){ $path_url=static_url().$dir2.$new_filename; //上传成功,返回数据 return json_encode(array("success"=>1,"message"=>"","url"=>$path_url)); }else{ return json_encode(array("success"=>0,"message"=>"文件上传失败")); } }else{ //存在 return json_encode(array("success"=>0,"message"=>"文件名已存在,请重新上传")); } }else{ return json_encode(array("success"=>0,"message"=>"文件不合法")); } }else{ return json_encode(array("success"=>0,"message"=>"未上传图片")); } } ``` #### 解决方法 当我们点击上传图片的时候会弹出上传框,这个就是上传的表单,我们可以用调试器查出这是请求了image-dialog.js,具体路径为editor.md/plugins/image-dialog/image-dialog.js。我们可以对其中的var dialogContent变量进行就修改。 具体的修改代码 ```javascript if (settings.crossDomainUpload) { action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid; } var csrfToken = $('meta[name="_token"]').attr('content'); var csrfField = ""; if (csrfToken) { csrfField = "<input type='hidden' name='_token' value='" + csrfToken + "' />"; } ``` 在if(settings.crossDomainUpload)结束后加上这5行代码,接下来,将csrfField 变量加入到下面的代码中。 ```javascript var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) + ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) + "<label>" + imageLang.url + "</label>" + "<input type=\"text\" data-url />" + (function () { return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" + "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" + csrfField + "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" + "</div>" : ""; })() + "<br/>" + "<label>" + imageLang.alt + "</label>" + "<input type=\"text\" value=\"" + selection + "\" data-alt />" + "<br/>" + "<label>" + imageLang.link + "</label>" + "<input type=\"text\" value=\"http://\" data-link />" + "<br/>" + csrfField + ( (settings.imageUpload) ? "</form>" : "</div>"); ``` 然后在请求的页面头部加上这行代码 ```html <meta name="_token" content="{{ csrf_token() }}"/> ``` 这样再次请求上传图片就可以把token带过去。
标签:
laravel
评论
回复
测试人物
:
取消回复
评论正在提交中...请稍后
评论提交成功...
提交失败
评论
接口请求错误
加载更多
网站信息
联系博主
日志总数:82 篇
网站运行天数:440 天
微信:未设置
QQ:未设置
热门文章
layui 的 checkbox 联动,监听事件不准确
2019-11-05
284
4
PHP 控制 QPS (Query Per Second) 的写法
2019-11-05
229
0
phpstudy 升级 MySQL版本到MySQL5.7
2020-04-01
152
0
laravel php artisan migrate 指定迁移文件
2019-12-12
112
0
laravel 整合 workerman 做聊天室
2019-12-12
91
0
微擎数据库表结构,供参考!
2019-11-05
87
0
PHP 用正则分章节
2019-12-05
84
0
在使用laravel+layui时,模板语法冲突
2019-11-05
80
0
git 常用命令
2019-12-11
78
0
Navicat 远程连接 mysql报can't connect to mysql server on 10060
2019-11-05
77
0
在阿里云服务器上部署git
2019-11-05
76
0
curl 请求
2019-11-05
75
0