专栏首页Debug客栈Laravel5.8使用LayUI上传并显示图片操作

Laravel5.8使用LayUI上传并显示图片操作

这个问题已经困扰好久了,唉 比较难受,本来学习laravel使用的是Bootstrap,之后用的是Uploadify进行上传图片,无奈,这个技术需要Flash的支持,一直没有实现,后来思考再三,还是选择用Layui后台框架进行设计,emm~~~毕竟用他的组件可以实现和Uploadify一样的无刷新上传图片的效果,但是比较难受的就是Laravel使用Layui进行回调函数显示图片的时候,Laravel总是莫名的增加了域名之外的控制器及方法名称,比较难受,不,是特别难受,从网上及QQ群大神中也没有问出个所以然,不过,我最后实现的是用的比较笨的方式,就是拼接为字符串的形式进行链接返回调用,(使用前台添加域名的方式实现了emm~~)好了 话不多说,看看实现的代码吧!

Laravel路由设置

//用户图片管理设置
Route::get('pic', 'PicController@index');
Route::get('pic/create', 'PicController@create');

//设置文件上传的方法
Route::any('shangchuan', 'CommonController@upload');

前台上传及展示效果页面

<div class="layui-form-item">
    <label class="layui-form-label">上传图片</label>
    <div class="layui-input-inline">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="upload_img">上传图片</button>
        </div>
    </div>
</div>
<input type="hidden" name="img" value="">
<div class="layui-form-item">
    <label class="layui-form-label">图片展示</label>
    <div class="layui-input-inline">
        <div class="layui-upload-list">
            <img class="layui-upload-img admin-pic-create-img" id="pre_img">
            <p id="demoText"></p>
        </div>
    </div>
</div>

前台Layui的JS代码设置

<script type="text/javascript">
    /**
     * 上传图片操作
     */
    layui.use(['form', 'layer', 'upload'],function(){
        $ = layui.jquery;
        form = layui.form;
        layer = layui.layer;

        upload = layui.upload;
        uploadInst = upload.render({
            //绑定元素
            elem: '#upload_img',
            //绑定laravel CSRF认定
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            //上传接口
            url : '/admin/shangchuan',
            //上传完毕回调
            done : function(res){
                var domian = 'http://'+window.location.host;
                //显示图片
                $('#pre_img').attr('src', domian + res.msg);
                //给img隐藏域赋值,用于提交保存
                $('input[name="img"]').val(res.msg);
            },
            //请求异常回调
            error : function(){
                layer.msg('请求异常',{'icon':2, 'anim':2});
            }
        });
    });
</script>

后端控制器接口设置

也就是在这个控制器中,我直接使用拼接的方式进行链接的拼接,这样就可以避免Laravel自动对JSON返回值自动加前缀的BUG,虽然有点笨,但是解决了这个方法,以后有好的方法在继续更新!!!

//公共控制器
class CommonController extends Controller
{
    //文件上传方法
    public function upload(Request $request){
        $file = $request->file('file');
        if($file == null){
            exit(json_encode(array('code'=>1, 'msg'=>'没有上传任何图片文件')));
        }
        //图片存储根目录
        $path = "./uploads";
        //获取文件后缀
        $ext = $file->getClientOriginalExtension();
        //获取文件创建当前日期
        $date = date('Ymd');
        //新创建文件名及其后缀
        $newFile = time().'.'.$ext;
        //构造目录
        $tree = $path.'/'.$date;
        if(file_exists($date)){
            mkdir($tree,0777);
        }
        //将新文件移动至对应文件夹下
        $file->move($tree, $newFile);

        $imgPath = $tree.'/'.$newFile;

        $url = $imgPath;
        if($imgPath != null){
            exit(json_encode(array('code'=>1, 'msg'=>$url)));
        }else{
            exit(json_encode(array('code'=>0, 'msg'=>'上传失败')));
        }
    }
}

本文链接:https://www.debuginn.cn/2236.html

本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 软件工程 活动图、状态图、顺序图实验题

    开始。 学生进入考场。 监考教师核对检查证件,发放试卷。 学生对号入座。 学生开始答题。 学生交卷。 监考教师收取试卷。 结束。

    Debug客栈
  • Laravel5.8使用LayUI实现批量删除

    问题同样困扰好久,前几天是CSRF认证问题,今天遇到了批量删除选择选中元素的问题,网上查找了好多代码,可算是把这个业务逻辑实现了,鼓掌,接下来听听我的解决方案吧...

    Debug客栈
  • Laravel 实现前台网站三级目录

    数据库设计思路,如何划分父子分类,主要是看父分类ID及路径字段,路径一直情况下根据共同前缀字段进行划分。

    Debug客栈
  • 你没中过勒索病毒,不知道备份有多重要

    今天是春节放假前的最后一天,照例对自己一些数据开始进行了备份。突然想到关于数据备份有些心得想要分享下,于是写了这篇文章。

    twowinter
  • LayUI 多图上传操作实例参考

    用户3056046
  • 登录-Thinkphp5.1开发后台管理系统

    将config目录下的app.php文件(thinkphp5.1版本核心配置文件)内的路由配置项设置为开启状态;

    申霖
  • Flutter 即学即用系列博客——06 超实用 Widget 集锦

    大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码。

    AndroidTraveler
  • Django学习笔记之模板渲染、模板语言、simple_tag、母版子版、静态配置文件

    C:\Users\yangmingwei\PycharmProjects\yangmv> python manage.py startapp web

    Jetpropelledsnake21
  • 学界 | 清华大学自然语言处理与社会人文计算研究中心成立!

    AI 科技评论按:2019 年 7 月 1 日,清华大学人工智能研究院自然语言处理与社会人文计算研究中心成立仪式暨学术报告与开元成功发布会在清华大学 FIT 楼...

    AI科技评论
  • 漫画:删除链表倒数第N个节点(二次修订版)

    哨兵节点,捞干货,其实就是一个附加在原链表最前面用来简化边界条件的附加节点,它的值域不存储任何东西,只是为了操作方便而引入。

    程序员小浩

扫码关注云+社区

领取腾讯云代金券