laravel 上传图片

最近在自己新建的博客后台中使用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带过去。

layui 的 checkbox 联动，监听事件不准确

PHP 控制 QPS (Query Per Second) 的写法

phpstudy 升级 MySQL版本到MySQL5.7

laravel php artisan migrate 指定迁移文件

laravel 整合 workerman 做聊天室

微擎数据库表结构，供参考！

PHP 用正则分章节

在使用laravel+layui时，模板语法冲突

git 常用命令

Navicat 远程连接 mysql报can't connect to mysql server on 10060

在阿里云服务器上部署git

curl 请求