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存储方式(也可以自定义目录):
$savename = Filesystem::disk('public')->putFile('topic', $file);
1
上传结果:
为什么这里多了一层storage目录呢?因为在config配置文件里配置了默认的根目录,在
filesystem.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的配置:
'root' => app()->getRootPath() . 'public',
1
结果:
前端页面
这里是使用了layuiadmin的页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!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: 可以在上传控制器做文件的类型、大小等属性校验。