Laravel 5 教程 - 文件上传

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

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

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

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

1. <?php 
2.  
3. return [ 
4.  
5.     /* 
6.     |-------------------------------------------------------------------------- 
7.     | Default Filesystem Disk 
8.     |-------------------------------------------------------------------------- 
9.     | 
10.     | Here you may specify the default filesystem disk that should be used 
11.     | by the framework. A "local" driver, as well as a variety of cloud 
12.     | based drivers are available for your choosing. Just store away! 
13.     | 
14.     | Supported: "local", "ftp", "s3", "rackspace" 
15.     | 
16.     */ 
17.  
18.     // 默认使用本地端空间 支持 "local", "ftp", "s3", "rackspace" 
19.     'default' => 'local', 
20.  
21.     /* 
22.     |-------------------------------------------------------------------------- 
23.     | Default Cloud Filesystem Disk 
24.     |-------------------------------------------------------------------------- 
25.     | 
26.     | Many applications store files both locally and in the cloud. For this 
27.     | reason, you may specify a default "cloud" driver here. This driver 
28.     | will be bound as the Cloud disk implementation in the container. 
29.     | 
30.     */ 
31.  
32.     // 云存储使用 Amazon S3 
33.     'cloud' => 's3', 
34.  
35.     /* 
36.     |-------------------------------------------------------------------------- 
37.     | Filesystem Disks 
38.     |-------------------------------------------------------------------------- 
39.     | 
40.     | Here you may configure as many filesystem "disks" as you wish, and you 
41.     | may even configure multiple disks of the same driver. Defaults have 
42.     | been setup for each driver as an example of the required options. 
43.     | 
44.     */ 
45.  
46.     'disks' => [ 
47.  
48.         // 本地端的local空间 
49.         'local' => [ 
50.             'driver' => 'local', 
51.             'root' => storage_path('app'), 
52.         ], 
53.  
54.         // 本地端的public空间 
55.         'public' => [ 
56.             'driver' => 'local', 
57.             'root' => storage_path('app/public'), 
58.             'visibility' => 'public', 
59.         ], 
60.  
61.         // 新建一个本地端uploads空间（目录） 用于存储上传的文件 
62.         'uploads' => [ 
63.  
64.             'driver' => 'local', 
65.  
66.             // 文件将上传到storage/app/uploads目录 
67.             'root' => storage_path('app/uploads'), 
68.  
69.             // 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个 
70.             //'root' => public_path('uploads'), 
71.         ], 
72.  
73.         // Amazon S3 相关配置 
74.         's3' => [ 
75.             'driver' => 's3', 
76.             'key' => 'your-key', 
77.             'secret' => 'your-secret', 
78.             'region' => 'your-region', 
79.             'bucket' => 'your-bucket', 
80.         ], 
81.  
82.     ], 
83.  
84. ]; 

三、代码实现文件上传

1. 控制器代码
 

1. <?php 
2.  
3. namespace App\Http\Controllers; 
4.  
5. use Illuminate\Http\Request; 
6. use App\Http\Requests; 
7. use Illuminate\Support\Facades\Storage; 
8.  
9.  
10. class FileController extends Controller 
11. { 
12.  
13.     // 文件上传方法 
14.     public function upload(Request $request) 
15.     { 
16.  
17.         if ($request->isMethod('post')) { 
18.  
19.             $file = $request->file('picture'); 
20.  
21.             // 文件是否上传成功 
22.             if ($file->isValid()) { 
23.  
24.                 // 获取文件相关信息 
25.                 $originalName = $file->getClientOriginalName(); // 文件原名 
26.                 $ext = $file->getClientOriginalExtension();     // 扩展名 
27.                 $realPath = $file->getRealPath();   //临时文件的绝对路径 
28.                 $type = $file->getClientMimeType();     // image/jpeg 
29.  
30.                 // 上传文件 
31.                 $filename = date('Y-m-d-H-i-s') . '-' . uniqid() . '.' . $ext; 
32.                 // 使用我们新建的uploads本地存储空间（目录） 
33.                 //这里的uploads是配置文件的名称 
34.                 $bool = Storage::disk('uploads')->put($filename, file_get_contents($realPath)); 
35.                 var_dump($bool); 
36.  
37.             } 
38.  
39.         } 
40.  
41.         return view('upload'); 
42.     } 
43. } 

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

1. <!DOCTYPE html> 
2. <html lang="en"> 
3. <head> 
4.     <meta charset="UTF-8"> 
5.     <meta name="renderer" content="webkit"> 
6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
7.     <meta name="csrf-token" content="{{ csrf_token() }}"> 
8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
9.     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
10.     <meta name="apple-mobile-web-app-capable" content="yes"> 
11.     <meta name="format-detection" content="telephone=no"> 
12.  
13. <link rel="stylesheet"  href="/static/layui-v2.1.7/css/layui.css" /> 
14. <script src="/static/layui-v2.1.7/layui.js"></script> 
15. <link rel="stylesheet" href="/static/css/bootstrap-4.0.0-beta.2/css/bootstrap.min.css" /> 
16. <script src="/static/js/jquery/jquery-3.2.1.min.js"></script> 
17. <script src="/static/js/popper/popper.min.js"></script> 
18. <script src="/static/css/bootstrap-4.0.0-beta.2/js/bootstrap.min.js"></script> 
19.  
20. <link rel="stylesheet" href="/static/css/index.css" /> 
21. <link href="/static/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> 
22. <link href="/static/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/> 
23. <link href="/static/bootstrap-fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/> 
24. <script src="/static/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script> 
25. <script src="/static/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script> 
26. <script src="/static/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script> 
27. <script src="/static/bootstrap-fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script> 
28. <script src="/static/bootstrap-fileinput/themes/fa/theme.js" type="text/javascript"></script> 
29.  
30.     <title>报表上传</title> 
31. </head> 
32. <body> 
33.  
34. <div class="layui-body"> 
35.  
36.  
37.         <div style="padding: 15px;"> 
38.             <blockquote class="layui-elem-quote"> 
39.                 报表上传 
40.             </blockquote> 
41.         </div> 
42.  
43.     <div class="container"> 
44.  
45.         <div class="container kv-main"> 
46.             <form enctype="multipart/form-data" method="post"> 
47.                 <label class="control-label">Select File</label> 
48.                 <input id="input-b5" name="input-b5" type="file" multiple> 
49.                 {{ csrf_field() }} 
50.             </form> 
51.  
52.         </div> 
53.  
54.  
55.     </div> 
56.  
57. </div> 
58.  
59.  
60. </body> 
61. <script> 
62.  
63.     $(document).ready(function(){ 
64.         $("#input-b5").fileinput({ 
65.             showCaption: false, 
66.             theme: 'fa', 
67.             language: 'zh', 
68.             uploadUrl: './upload', 
69.             allowedFileExtensions: ['jpg', 'png', 'gif'] 
70.         }); 
71.     }); 
72.     $.ajaxSetup({ 
73.         headers: { 
74.             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
75.         } 
76.     }); 
77.  
78. </script> 
79.  
80. </html> 

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

1. <form method="post" enctype="multipart/form-data" >     
2.     <input type="file" name="picture"> 
3.     <button type="submit"> 提交 </button> 
4. </form>