zoukankan      html  css  js  c++  java
  • Laravel 5 教程

    一、简介

    Laravel 有很棒的文件系统抽象层,是基于 Frank de Jonge 的 Flysystem 扩展包。 Laravel 集成的 Flysystem 提供了简单的接口,可以操作本地端空间、 Amazon S3 、 Rackspace Cloud Storage 。更方便的是,它可以非常简单的切换不同保存方式,但仍使用相同的 API 操作!

    默认使用本地端空间。当然,你也可以设置多组磁盘,甚至在多个磁盘使用相同的驱动。Laravel文件系统提供了非常强大的功能,但是本文只介绍常用的文件上传功能。

    本文通过介绍使用本地端空间来介绍Laravel中文件上传的使用。

    二、配置

    文件系统的配置文件在 config/filesystems.php 文件中,此处我们新建一个uploads本地磁盘空间用于存储上传的文件,具体配置项及说明如下:

    <?php
    
    return [
    
        /*
        |--------------------------------------------------------------------------
        | Default Filesystem Disk
        |--------------------------------------------------------------------------
        |
        | Here you may specify the default filesystem disk that should be used
        | by the framework. A "local" driver, as well as a variety of cloud
        | based drivers are available for your choosing. Just store away!
        |
        | Supported: "local", "ftp", "s3", "rackspace"
        |
        */
    
        // 默认使用本地端空间 支持 "local", "ftp", "s3", "rackspace"
        'default' => 'local',
    
        /*
        |--------------------------------------------------------------------------
        | Default Cloud Filesystem Disk
        |--------------------------------------------------------------------------
        |
        | Many applications store files both locally and in the cloud. For this
        | reason, you may specify a default "cloud" driver here. This driver
        | will be bound as the Cloud disk implementation in the container.
        |
        */
    
        // 云存储使用 Amazon S3
        'cloud' => 's3',
    
        /*
        |--------------------------------------------------------------------------
        | Filesystem Disks
        |--------------------------------------------------------------------------
        |
        | Here you may configure as many filesystem "disks" as you wish, and you
        | may even configure multiple disks of the same driver. Defaults have
        | been setup for each driver as an example of the required options.
        |
        */
    
        'disks' => [
    
            // 本地端的local空间
            'local' => [
                'driver' => 'local',
                'root' => storage_path('app'),
            ],
    
            // 本地端的public空间
            'public' => [
                'driver' => 'local',
                'root' => storage_path('app/public'),
                'visibility' => 'public',
            ],
    
            // 新建一个本地端uploads空间(目录) 用于存储上传的文件
            'uploads' => [
    
                'driver' => 'local',
    
                // 文件将上传到storage/app/uploads目录
                'root' => storage_path('app/uploads'),
    
                // 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个
                //'root' => public_path('uploads'),
            ],
    
            // Amazon S3 相关配置
            's3' => [
                'driver' => 's3',
                'key' => 'your-key',
                'secret' => 'your-secret',
                'region' => 'your-region',
                'bucket' => 'your-bucket',
            ],
    
        ],
    
    ];

    三、代码实现文件上传

    1. 控制器代码

    <?php
    
    namespace AppHttpControllers;
    
    use IlluminateHttpRequest;
    use AppHttpRequests;
    use IlluminateSupportFacadesStorage;
    
    
    class FileController extends Controller
    {
    
        // 文件上传方法
        public function upload(Request $request)
        {
    
            if ($request->isMethod('post')) {
    
                $file = $request->file('picture');
    
                // 文件是否上传成功
                if ($file->isValid()) {
    
                    // 获取文件相关信息
                    $originalName = $file->getClientOriginalName(); // 文件原名
                    $ext = $file->getClientOriginalExtension();     // 扩展名
                    $realPath = $file->getRealPath();   //临时文件的绝对路径
                    $type = $file->getClientMimeType();     // image/jpeg
    
                    // 上传文件
                    $filename = date('Y-m-d-H-i-s') . '-' . uniqid() . '.' . $ext;
                    // 使用我们新建的uploads本地存储空间(目录)
                    //这里的uploads是配置文件的名称
                    $bool = Storage::disk('uploads')->put($filename, file_get_contents($realPath));
                    var_dump($bool);
    
                }
    
            }
    
            return view('upload');
        }
    }    

     2-1.upload.blade.php 模板代码(上传组件为bootstrap-fileinput)如果太乱,可以看下面的最简单的页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
    
    <link rel="stylesheet"  href="/static/layui-v2.1.7/css/layui.css" />
    <script src="/static/layui-v2.1.7/layui.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap-4.0.0-beta.2/css/bootstrap.min.css" />
    <script src="/static/js/jquery/jquery-3.2.1.min.js"></script>
    <script src="/static/js/popper/popper.min.js"></script>
    <script src="/static/css/bootstrap-4.0.0-beta.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/index.css" /> <link href="/static/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <link href="/static/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/> <link href="/static/bootstrap-fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/> <script src="/static/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script> <script src="/static/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script> <script src="/static/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script> <script src="/static/bootstrap-fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script> <script src="/static/bootstrap-fileinput/themes/fa/theme.js" type="text/javascript"></script> <title>报表上传</title> </head> <body> <div class="layui-body"> <div style="padding: 15px;"> <blockquote class="layui-elem-quote"> 报表上传 </blockquote> </div> <div class="container"> <div class="container kv-main"> <form enctype="multipart/form-data" method="post"> <label class="control-label">Select File</label> <input id="input-b5" name="input-b5" type="file" multiple> {{ csrf_field() }} </form> </div> </div> </div> </body> <script> $(document).ready(function(){ $("#input-b5").fileinput({ showCaption: false, theme: 'fa', language: 'zh', uploadUrl: './upload', allowedFileExtensions: ['jpg', 'png', 'gif'] }); }); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); </script> </html>

    2-2. 最基础的 upload.blade.php 模板代码:

    <form method="post" enctype="multipart/form-data" >    
        <input type="file" name="picture">
        <button type="submit"> 提交 </button>
    </form>
  • 相关阅读:
    存储过程为参数NULL时的处理方法
    查询数据占比
    ROW_NUMBER() OVER()函数用法;(分组,排序),partition by
    存储过程 set 和 select 对变量赋值的区别 (转自Theo)
    对布尔值取反,使用 ~
    创建存储过程
    JavaScript验证密码强度
    一些简单的JavaScript的方法
    递归方式实现树的展示形式
    ASP.NET验证控件详解
  • 原文地址:https://www.cnblogs.com/fps2tao/p/8007312.html
Copyright © 2011-2022 走看看