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的页面：
[cc lang=”html”]
<!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>
[/cc]
Tips: 可以在上传控制器做文件的类型、大小等属性校验。
相关文章
