首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Laravel5.8使用LayUI上传并显示图片操作

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

作者头像
Meng小羽
发布2019-12-23 17:39:30
2.4K0
发布2019-12-23 17:39:30
举报
文章被收录于专栏:Debug客栈Debug客栈

这个问题已经困扰好久了,唉 比较难受,本来学习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://cloud.tencent.com/developer/article/1558257

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Laravel路由设置
  • 前台上传及展示效果页面
  • 前台Layui的JS代码设置
  • 后端控制器接口设置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档