### 控制器代码 只上传到本地服务器 如果上传到七牛 csdn等 请复制粘贴sdk代码修改 ``` <?php namespace app\vip\controller; class Upload extends Base { public function upload() { $file = request()->file('file'); // 移动到框架应用根目录/uploads/ 目录下 $info = $file->move('./uploads'); if ($info) { // 成功上传后 获取上传信息 $path = '/uploads/' . $info->getSaveName();// 拼接地址回传 return ['code' => 1, 'msg' => '上传成功', 'url' => $path]; } else { // 上传失败获取错误信息 return ['code' => 0, 'msg' => $file->getError()]; } } } ``` #### 以下代码抄自layui示例代码修改 1 页面代码 ``` <div class="row cl"> <label class="form-label col-xs-4 col-sm-2">上传图片</label> <div class="formControls col-xs-8 col-sm-6"> <div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1" width="100px" src="{$info.img|default=''}"> <input type="hidden" id="img" name="img" value="{$info.img|default=''}" > </div> </div> </div> </div> ``` 2 js代码 ``` <link rel="stylesheet" href="/static/vip/lib/layui/css/layui.css" media="all"> <script src="/static/vip/lib/layui/layui.js"></script> <script> $(function () { layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test1' ,url: "{:url('Upload/upload')}" ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#demo1').attr('src', result); //图片链接（base64） }); } ,done: function(res){ //如果上传失败 if(res.code == 0){ // return layer.msg('上传失败'); return layer.msg(res.msg); } //上传成功 $('#img').val(res.url); return layer.msg(res.msg); } ,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(); }); } }); }); }); </script> ```