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

相關文章
相關標籤/搜索