### 控制器代碼 只上傳到本地服務器 如果上傳到七牛 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> ```