Laravel+Layer 图片上传功能整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/78961365

♩ 背景

  • 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能
  • 但是在 ajax(POST)提交请求时,一直显示 500 报错

♪ 分析

⒈ 问题所在

⒉ 解决方案

  • 一般在表单提交时,都会存放一个隐藏的输入框
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
  • 或者在需要提交的表单中补充一行代码:
<form method="POST" action="/profile">
    {{ csrf_field() }}
    ...
</form>
  • 但是,在比较单一的元素进行 ajax 提交时,建议可使用如下的方法 ①. 页面中添加隐藏域
<input type="hidden" name="_token" class="tag_token" value="<?php echo csrf_token(); ?>">      

②. ajax 请求前,先获取 csrf_token()

var tag_token = $(".tag_token").val();

③. ajax 请求时,将该值作为数据的一部分传输过去,例如:

data:{'_token':tag_token}

♫ 实现步骤

⒈ 源文件目录

⒉ 前端准备

  • 页面引入layui 的 css 和 js 文件
<script type="text/javascript" src="layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />

: 本人下载的 layui 框架源码包为 layui-v2.2.45

  • 核心代码:
<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">&#xe67c;</i>上传图片
            </button>
            <img class="layui-upload-img img-upload-view" src="upload/dog.jpg">
            <p id="demoText"></p>
        </div>
    </div>
  • js 代码:
<script type="text/javascript">
    layui.use('upload', function(){
        var upload = layui.upload;
        var tag_token = $(".tag_token").val();
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.btn_upload_img'
            ,type : 'images'
            ,exts: 'jpg|png|gif' //设置一些后缀,用于演示前端验证和后端的验证
            //,auto:false //选择图片后是否直接上传
            //,accept:'images' //上传文件类型
            ,url: 'upload.php'
            ,data:{'_token':tag_token}
            ,before: function(obj){
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    $('.img-upload-view').attr('src', result); //图片链接(base64)
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.status == 1){
                    return layer.msg('上传成功');
                }else{//上传成功
                    layer.msg(res.message);
                }
            }
            ,error: function(){
                //演示失败状态,并实现重传
                return layer.msg('上传失败,请重新上传');
            }
        });
    });
</script>

⒊ 后端处理

  • 因为前端 Layer 默认的是 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) { // 出错
        $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/".$date."/";
        $file_path = $path . $new_file_name;
        if (file_exists($file_path)) {
            $message = "此文件已经存在啦";
        } else {
        //TODO 判断当前的目录是否存在,若不存在就新建一个!
        if (!is_dir($path)){mkdir($path,0777);}
            $upload_result = move_uploaded_file($file_tmp, $file_path); 
            //此函数只支持 HTTP POST 上传的文件
            if ($upload_result) {
                $status = 1;
                $message = $file_path;
            } else {
                $message = "文件上传失败,请稍后再尝试";
            }
        }
    }
} else {
    $message = "参数错误";
}
return showMsg($status, $message);

【注意】: 使用下载的源码文件时,可将该处的核心代码进行替换

  • 补充公共函数 showMsg()
function showMsg($status,$message = '',$data = array()){
    $result = array(
        'status' => $status,
        'message' =>$message,
        'data' =>$data
    );
    exit(json_encode($result));
}

⒋ 实现效果

♬ 补充

⒈ 注意事项

  • 提供的代码,可用于PHP的原生开发或其他流行框架,其实只要后台能接收到 $_FILES 数据就好办了
  • 我就是卡在了 Laravel 框架的 CSRF 认证上,耗费了好多时间,所以:
<!--如果使用的是Laravel框架,打开下面这句话!-->
    <!--<input type="hidden" name="_token" class="tag_token" value="<?php /*echo csrf_token(); */?>">-->
  • 后端代码的图片上传功能属于原生程序,可自行优化,建议使用流行框架所推荐的集成方法。

move_uploaded_file() 补充

对于上述的代码,需要注意一点 : move_uploaded_file()方法的使用

  • 如果图片所上传的目录不存在,很可能会报错,所以需要判断当前情况,若不存在,要建立新目录
//TODO 判断当前的目录是否存在,若不存在就新建一个!
if (!is_dir($path)){mkdir($path,0777);} 

⒊ Laravel 中的处理

  • 作为 PHP 开发的流行框架,必然做了对文件上传功能的集成,文件的上传,可参考学习文档,以本人的处理为例:

⑴. 相对于使用默认的上传方法,会将文件存放到 "storage"目录中,而进一步对该目录的访问还需要添加软链接,感觉有点麻烦,所以我指定磁盘到 "public"目录即可 ⑵. 可参考我之前的一篇文章—— Laravel 文件上传功能实现,打开配置文件 config/filesystems.php ,向磁盘配置数组中添加一个 url

'upload' => [
            'driver' => 'local',
            'root' => public_path('upload/image/'.date('Ymd')),
        ],

⑶. 相对应的后台核心处理代码则为:

public function 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/'.$date.'/'.$path;
                $status = 1;
                $data['url'] = $fileUrl;
                $message = '上传成功';
            }else{
                $message = "上传失败";
            }
        } else {
            $message = "参数错误";
        }
        return showMsg($status, $message,$data);
    }

  • 如此一来,上传的图片所在目录为: public/upload/image/{$date}/

☺ 源码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

Java程序排查问题利器之Btrace

4194
来自专栏Script Boy (CN-SIMO)

Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析

转载请注明出处:CN_Simo。 题解:   本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界。 本来计划是讲解Qt源码静态编译...

4151
来自专栏人人都是极客

Linux下so动态库一些不为人知的秘密

Linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名。二者都使用广泛。本文主要讲动态库方面知识。

1452
来自专栏玄魂工作室

Struts2 S2-052 RCE简单测试

本文由玄魂和 方块K 合写。 ---- 不太愿意跟风写类似的文章,网友“方块K” 投了一篇相关文章过来,但是略显简略,我重新进行了扩展。 参考了网上的相关文章,...

3436
来自专栏Albert陈凯

HTTP、TCP、UDP:通信协议的规则和区别

TCP、HTTP、UDP:都是通信协议,也就是通信时所遵守的规则,只有双方按照这个规则“说话”,对方才能理解或为之服务。 TCP HTTP UDP三者的...

2958
来自专栏农夫安全

DiscuzX v3.4 任意文件删除漏洞

漏洞影响 DiscuzX版本 ≤ v3.4 官方于9月29日修复该漏洞: https://gitee.com/ComsenzDiscuz/DiscuzX/com...

3546
来自专栏pangguoming

创建GitHub技术博客全攻略

说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字. 1. 注册账号: 地址:...

3937
来自专栏Java技术分享

PDF.js专题

前言     英文是github上的原文,找不到中文资料,我根据自己理解翻译的,有些词意思拿不准就直接把单词留在原地了,看这个文档应该可以凑合着用了。 PDF....

1.4K10
来自专栏python学习指南

python爬虫(六)_urllib2:handle处理器和自定义opener

本文将介绍handler处理器和自定义opener,更多内容请参考:python学习指南 opener和handleer 我们之前一直使用的是urllib...

2768
来自专栏流柯技术学院

android自动化之monkeyrunner

运行monkeyrunner之前必须先运行相应的模拟器或连上设备,不然monkeyrunner无法连接设备。

1132

扫码关注云+社区