Debug客栈
做一个爱分享的程序猿
Debug客栈
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 协议进行许可,转载请保留此文章链接
相关链接: Debug客栈  |  Debug客栈引导页  |  加入交流群  |  赞助本站  |  博主微博  |  博主推特  |  音乐下载器
社会主义核心价值观: 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善
首页      技术文章      PHP全栈      Laravel5.8使用LayUI上传并显示图片操作

发表评论

textsms
account_circle
email

Debug客栈

Laravel5.8使用LayUI上传并显示图片操作
这个问题已经困扰好久了,唉 比较难受,本来学习laravel使用的是Bootstrap,之后用的是Uploadify进行上传图片,无奈,这个技术需要Flash的支持,一直没有实现,后来思考再三,还是选择用L…
扫描二维码继续阅读
2019-05-03