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