Filesystem文件上傳
控制器:
<?php namespace app\admin\controller; use app\BaseController; use think\facade\Filesystem; use think\facade\View; class Upload extends BaseController { // 上傳頁面 public function index(){ return View::fetch("index"); } // 上傳文件方法 public function image(){ if(!$this->request->isPost()){ return show(config("status.error"), "請求不合法"); } $file = $this->request->file("file"); $savename = Filesystem::putFile('topic', $file); if(!$savename){ return show(config("status.error"), "上傳圖片失敗"); } return show(config("status.success"), "上傳成功", ["savename"=>$savename]); } }
默認狀況下是上傳到本地服務器,會在runtime/storage
目錄下面生成以當前日期爲子目錄,以微秒時間的md5編碼爲文件名的文件,例如:
考慮到runtime
目錄不能直接訪問,若是你但願上傳的文件是能夠直接訪問或者下載的話,能夠使用public
存儲方式(也能夠自定義目錄):javascript
$savename = Filesystem::disk('public')->putFile('topic', $file);
上傳結果:
爲何這裏多了一層storage目錄呢?由於在config配置文件裏配置了默認的根目錄,在
filesystem.php
配置文件:php
<?php return [ // 默認磁盤 'default' => env('filesystem.driver', 'local'), // 磁盤列表 'disks' => [ 'local' => [ 'type' => 'local', 'root' => app()->getRuntimePath() . 'storage', ], 'public' => [ // 磁盤類型 'type' => 'local', // 磁盤路徑 'root' => app()->getRootPath() . 'public/storage', // 磁盤路徑對應的外部URL路徑 'url' => '/storage', // 可見性 'visibility' => 'public', ], // 更多的磁盤配置信息 ], ];
若是不但願有storage
目錄,能夠修改public的配置:css
'root' => app()->getRootPath() . 'public',
結果:
html
前端頁面
這裏是使用了layuiadmin的頁面:前端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上傳</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="{__STATIC__}/admin/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="{__STATIC__}/admin/layuiadmin/style/admin.css" media="all"> </head> <body> <style> .layui-upload-img{ width: 92px; height: 92px; margin: 0 10px 10px 0;} </style> <div class="layui-fluid"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">普通圖片上傳</div> <div class="layui-card-body"> <div class="layui-upload"> <button type="button" class="layui-btn" id="test-upload-normal">上傳圖片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="test-upload-normal-img"> <p id="test-upload-demoText"></p> </div> </div> </div> </div> </div> </div> </div> <script src="{__STATIC__}/admin/layuiadmin/layui/layui.js"></script> <script> layui.config({ base: '{__STATIC__}/admin/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'upload'], function(){ var $ = layui.jquery ,upload = layui.upload; //普通圖片上傳 var uploadInst = upload.render({ elem: '#test-upload-normal', url: '/admin/upload/image', before: function(obj){ //預讀本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#test-upload-normal-img').attr('src', result); }); }, done: function(res){ if(res.status === 1){ return layer.msg('上傳成功'); }else{ return layer.msg('上傳失敗'); } }, error: function(){ var demoText = $('#test-upload-demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); }); </script> </body> </html>
Tips: 能夠在上傳控制器作文件的類型、大小等屬性校驗。java
本文同步分享在 博客「zy1281539626」(CSDN)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。jquery