ThinkPHP6项目基操(17.实战部分 Filesystem文件上传)

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

相关文章
相关标签/搜索