前台页面文件上传代码
<div class="layui-upload" style="float: left"> <label class="layui-form-label"></label> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <label class="layui-form-label"></label> <img style="width: 100px" class="layui-upload-img" id="demo1"> <p style="width:100px;" id="demoText"></p> </div> </div> <!-- js显示图片上传,传值到隐藏域,后台获取隐藏域的值然后进行上传数据库--> <input type="hidden" name="image" value="" id="hid">前台页面js代码
<script> //JavaScript代码区域 layui.use(['element', 'layer', 'form', 'flow', 'upload'], function () { var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块 $ = layui.jquery, layer = layui.layer, form = layui.form, flow = layui.flow, upload = layui.upload; //监听导航点击 element.on('nav(demo)', function (elem) { //console.log(elem) layer.msg(elem.text()); }) //普通图片上传 var uploadInst = upload.render({ elem: '#test1' //绑定点击事件 , url: '/uplodeimg' //改成您自己的上传接口 , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { //获取到选择的图片的地址,并为img 添加 src 属性 $('#demo1').attr('src', result); //图片链接（base64） }); } , done: function (res) { //如果上传失败 if (res.code > 0) { return layer.msg('上传失败'); } //上传成功,将后台返回的json 格式的数据赋值给隐藏域,之后作为图片地址的字段进行入库 $("#hid").val(res) } , error: function () { //演示失败状态，并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); form.on('submit(*)', function (data) { console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} }); }); </script>后台代码
public function uplodeImg() { $file = request()->file('file'); $url = $file->getInfo('tmp_name'); //拿文件的名字 $name = $file->getInfo('name'); //d调用上传阿里云oss $oss = new OssUploadImg(); $oss->uploadFile('myphotoimg', $name, $url); $url = 'https://my.oss-cn-shanghai.com/' . $name;//修改成你自己要存储图片的地址 //地址拼接后,返回选择上传的图片地址,json格式 return json_encode($url); }