author：咔咔
wechat：fangkangfk
这个layui上传图片初学者看不明白很正常，按照这个思路做就没问题的
首先就是拿他的前端代码
这里需要注意的就是这个button里边的lau-data这个参数，点击上传图片的时候会把这个参数带上，这里我是做成了保存路径的参数，比如这里是video，这个图片的保存路劲就是upload/video
<div class="layui-form-item"> <label class="layui-form-label">缩略图：</label> <div class="layui-input-inline w500 upload"> <input type="text" class="layui-input upload-input" style="max-width:100%;" value="789" placeholder="" id="vod_pic" name="vod_pic"> </div> <div class="layui-input-inline "> <button type="button" class="layui-btn layui-upload" lay-data="{data:{thumb_type:'video'}}" id="upload1">上传图片</button> </div> </div>
效果图：
在下来就是js代码了
这段js代码我圈起来的都是需要注意的地方，下来就按照红框的顺序解释一下
1.绑定uoload模块
2.将layui.upload这个模块绑定给upload
3.指向dom对象
4.上传地址
5.获取当前触发上传的元素，一般用于 elem 绑定 class 的情况
6.最后一个就是图片路径
<script type="text/javascript"> layui.use(['form', 'layer','upload'], function () { // 操作对象 var form = layui.form , layer = layui.layer , upload = layui.upload; upload.render({ elem: '.layui-upload' ,url: "{:url('upload/upload')}?flag=vod" ,method: 'post' ,done :function (res) { var obj = this.item; var input = $(obj).parent().parent().find('.upload-input'); input.val(res.data); } }); $('.upload-input').hover(function (e){ var e = window.event || e; var imgsrc = $(this).val(); if(imgsrc.trim()==""){ return; } var left = e.clientX+document.body.scrollLeft+20; var top = e.clientY+document.body.scrollTop+20; $(".showpic").css({left:left,top:top,display:""}); if(imgsrc.indexOf('://')<0){ imgsrc = IMAGR_PATH + '/' + imgsrc; } $(".showpic_img").attr("src", imgsrc); },function (e){ $(".showpic").css("display","none"); }); }); </script>
这个图片的路径不适合我的项目开发，于是我就修改了这个路径地址
这个是我在view.php里边定义属于我自己的图片路径地址
然后在到前端声明一下即可
这个时候就需要后太代码了，这个后台我们使用的是tp5
这个步骤我重新写一篇，因为这个属于我们的项目统一规范，在以后的项目开发中，会一直坚持这一套开发，并优化到最佳
tp5后台上传地址：
https://blog.csdn.net/fangkang7/article/details/85060379
