背景

昨天，在我的Laravel5.5框架项目中，我想集成Layer的图像上传功能，但是当ajax(POST)提交请求时，总是显示500个错误报告

分析

1.有什么问题吗

最后提取核心代码，在Larvel框架外运行，发现代码没有问题，因为与Larvel框架的接触太浅，忽略了CSRF的局限性

解决方案

通常，提交表单时，会存储一个隐藏的输入框

输入类型='隐藏'名称=' _令牌'值='？PHP echo csrf _ token()；'或者在要提交的表单中添加一行代码：

form method=' post ' action='/profile“{ csrf _ field()} }./form但是，在比较ajax提交的单个元素时，建议使用以下方法

(1).向页面添加隐藏字段

输入类型='隐藏'名称=' _令牌'类='标记_令牌'值='？PHP echo csrf _ token()；'.在Ajax请求之前，首先获取csrf_token()值

var tag_token=$('。tag _ token’)。val()；.当Ajax请求时，将该值作为数据的一部分传输，例如：

data : { ' _ token ' : tag _ token }的实现步骤

1.源文件目录

2.前端准备

页面中引入了layui的css和js文件

脚本类型=' text/JavaScript ' src=' http : layui/layui . js '/Script Script src=' http :3359 code . jquery.com/jquery-3 . 2 . 1 . min . js '/Script link rel='样式表' type=' text/CSS ' href=' layui/CSS/layui . CSS ' rel=' external nofollow '/注意：我下载的layui框架的源代码包是layui-的

核心代码：

div class=' layui-form-item ' div class=' layui-upload ' button type=' button ' name=' img _ upload ' class=' layui-BTN BTN _ upload _ img ' I class='layui-icon'/iupload pictures/button img class=' layui-upload-img-upload-view ' src=' http : upload/dog . jpg ' p id=' demon ext '/p/div/div js代码：

脚本类型=' text/JavaScript ' layui . use(' upload '，function(){ var upload=layui . upload；var tag_token=$('。tag _ token’)。val()；//普通图片上传var upload inst=upload . render({ elem : })。BTN _ upload _ img '，键入：' images '，exts : ' jpg | png | gif '//设置一些后缀来演示前端验证和后端验证//，Auto:false //选择图片后是否直接上传//，accept:'images' //上传文件类型，URL 3360' upload.php '，data : { ' _ token ' 3: tag _ token }，Before:函数(obj){ //中img-上传-查看')。不支持attr ('src '，result)；//图片链接(base64)})；}，done:函数(res){ //如果上传失败，如果(RES. status==1) {returnlayer.msg('上传成功')；}else{//成功上传layer . msg(RES . message)；}}，error: function(){ //演示失败状态，实现return layer.msg的重传(‘上传失败，请重新上传’)；} });});/script [13]后端处理

因为默认情况下前端层是一个POST请求，所以后台uplaod.php的核心代码如下：

If ($_POST) {//上传图片的具体操作$ file _ name=$ _ files[' file '][' name ']；//$ FIle _ type=$ _ FILES[' FIle '][' type ']；$ FIle _ tmp=$ _ FILES[' file '][' tmp _ name ']；$ FIle _ error=$ _ FILES[' FIle '][' error ']；$ FIle _ size=$ _ FILES[' FIle '][' size ']；if($ file _ error 0){//error $ message=$ file _ error；} elseif($file_size 1048576) {//文件太大$message='上传的文件不能大于1MB '；} else { $ date=date(' Ymd ')；$file_name_arr=explode(' . '，$ file _ name)；$new_file_name=date('YmdHis ')。'.'。$ file _ name _ arr[1]；$ path=“upload/”。$日期。'/';$file_path=$path。$ new _ file _ nameif(file _ exists($ file _ path)){ $ message='此文件已经存在'；} else {//TODO判断当前目录是否存在，如果不存在就新建一个！if(！is_dir($path)){mkdir($path，0777)；} $ upload _ result=move _ uploaded _ file($ file _ tmp，$ file _ path)；//此功能只支持文件如果($upload_result) {$status=1通过HTTP POST上传；$ message=$ file _ path} else {$message='文件上传失败，请稍后再试'；}} }} else {$message='错误的参数'；}返回showMsg($status，$ message)；【注意】:使用下载的源代码文件时，可以在那里替换核心代码

补充公共函数showMsg():

函数showMsg($status，$message=' '，$ data=array()){ $ result=array(' status '=$ status，' message'=$message，' data '=$ data)；exit(JSON _ encode($ result))；} 达到了效果

补充

1.注意事项提供的代码可以用于PHP或其他流行框架的本机开发。其实只要后台能接收到$_FILES的数据，就很容易了。我刚刚陷入了Laravel框架的CSRF认证，花了很多时间，所以：

！-如果您使用的是Laravel框架，请打开下面的句子！- !-输入类型='隐藏'名称='_token '类='标记_token '值='？PHP/* echo csrf _ token()；*/?'-后端代码的镜像上传功能属于原生程序，可以自行优化。建议使用流行框架推荐的集成方法。添加移动上传文件()

对于上述代码，需要注意使用： move_uploaded_file()方法

如果图片上传的目录不存在，很可能报错，需要判断当前情况。如果它不存在，应该创建一个新目录

//TODO判断当前目录是否存在，如果不存在则新建一个！if(！is_dir($path)){mkdir($path，0777)；} (3)作为PHP开发的流行框架，Laravel中的处理必须集成文件上传功能。文件上传可以参考学习文档。以我的处理为例：

(1).相比使用默认上传方式，文件会存储在‘storage’目录下，进一步访问目录需要添加软链接，有点麻烦，所以我可以指定磁盘到‘public’目录。

.您可以参考我之前的文章—— Laravel文件上传功能的实现，打开配置文件config/filesystems.php，并添加一个url到磁盘配置数组

上传'=['driver'=' local '，' root '=public _ path(' upload/image/')。日期(' ymd ')，]，。对应的后台核心处理代码是：

公共函数img _ file(Request $ Request){ $ status=0；$ data=[]；if($ request-method()==' POST '){ $ date=date(' Ymd ')；$ path=$ request-file(' file ')-store('，' upload ')；if($ path){ $ FileURL='/upload/image/'。$日期。'/'.$ path$ status=1；$ data[' URL ']=$ FileURL；$message=“上传成功”；}else{ $message='上传失败'；}} else {$message='错误的参数'；}返回showMsg($status，$message，$ data)；}因此上传图片的目录为：public/upload/image/{$date}/

源代码下载

源代码下载提供

摘要

以上是边肖介绍的Laravel图层的图片上传功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！