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 联动，监听事件不准确

phpstudy 升级 MySQL版本到MySQL5.7

laravel 整合 workerman 做聊天室

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

laravel php artisan migrate 指定迁移文件

在阿里云服务器上部署git

git 常用命令

PHP 用正则分章节

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

curl 请求

php 阿拉伯数字和中文数字的相互转换

PHPstudy 升级 MySQL版本到MySQL8