Laravel之文件上传

Laravel之文件上传

一、准备工作

  为了使前端界面比较好看同时也为了异步传输文件，通常会使用一款jQuery插件，博主比较了最近几款比较热门的文件上传插件，最终选择了Web Uploader。

  WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。官方网站传送门

  HTML代码：

    

        
选择图片
    

  自己封装的webuploader的函数：

  函数参数说明：

1. serverUrl : 服务器处理URL
2. elementID : 要渲染的元素id，在这个例子里，elementID就是filePicker

3. options : 是对接收文件的限制，接收的参数格式如下：

   var imgOptions = {  // 只允许选择图片文件。
       title: 'Images',
       extensions: 'png,jpg,jpeg,bmp',
       mimeTypes: 'image/*'
   };
   

4. fileSize : 上传文件大小限制，单位为 MB，这里直接填写数字即可，比如1即表示文件大小限制为1MB

·

function startWebUploader(serverUrl, elementID, options, fileSize) {
    // 初始化Web Uploader
    var fileUploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: "{{ URL::asset('assets/home/webuploader/Uploader.swf') }}",
        // 文件接收服务端。
        server: serverUrl,
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            'id': elementID,
            'multiple ': false,    //是否可多个文件上传
        },
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        duplicate :true,
        // 文件上传方式
        method: 'POST',
        // 向后台传递的数据
        formData: {
            '_token' : "{{csrf_token()}}"
        },
        accept: options,
        // 文件数量限制
        //fileNumLimit: 1,
        // 文件大小限制 40M
        fileSizeLimit: fileSize * 1024 * 1024
    });

    // 当有文件被添加进队列的时候
    fileUploader.on( 'fileQueued', function( file ) {
        var $list = $("#fileProgress");
        $list.html( '
' +
            '
' + file.name + '
' +
            '
等待上传...
' +
            '
' );

    });
    // 文件上传过程中创建进度条实时显示。
    fileUploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#file_id' ),
            $percent = $li.find('.progress .progress-bar');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('
' +
                '
' +
                '
' +
                '
').appendTo( $li ).find('.progress-bar');
        }
        $li.find('p.state').text('上传中');
        $percent.css( 'width', percentage * 100 + '%' );
    });
    // 文件上传成功
    fileUploader.on( 'uploadSuccess', function( file, data) {
        $( '#file_id' ).find('p.state').text('已上传');
    });

    fileUploader.on( 'uploadError', function( file, reason ) {
        if(reason == 'Q_EXCEED_SIZE_LIMIT')
            $( '#file_id' ).find('p.state').text('上传文件大小超过限制！');
        else if(reason == 'Q_TYPE_DENIED ')
            $( '#file_id' ).find('p.state').text('上传文件后缀不合法！');
        else
            $( '#file_id' ).find('p.state').text('上传错误！');
    });

    fileUploader.on( 'uploadComplete', function( file ) {
        $( '#file_id' ).find('.progress').fadeOut();
    });
}

·

  Web Uploader功能很多很多，如果您要实现的功能比较复杂，建议您查看官网文档。WebUploader只包含文件上传的底层实现，不包括UI部分。所以交互方面要自己写，可以看到这个封装函数我写了很长。

二、Laravel怎么处理文件

1. 通过 Artisan 命令来创建一个文件控制器，命令如下：

   php artisan make:controller FileController
   

回车之后你就可以看到在App/Http/Controllers目录下多了个FileController.php文件

1. 配置路由，在routes.php文件下添加路由如下：

   Route::post('uploadImg', 'FileController@uploadImg');

2. 在FileController.php文件中添加方法uploadImg()

   public function uploadImg(Request $request) {
       $file = $request->file('file');
       // 图片上传是否成功
       if ($file->isValid()) {
           // 扩展名
           $ext = $file->getClientOriginalExtension();
           // 生成唯一的文件名
           $filename = date('YmdHis') . '-' . uniqid() . '.' . $ext;
           // 将文件存储到 public/images 
           $file->move(public_path('images/'), $filename);
       }
   }
   

3. 如果你打算将文件存储到 storage/images ，还有一种写法:

注意：如果不是存储在storage中不能用这种方法！！

  4-1. 先要配置 config/filesystems.php，代码如下：

    // 在storage新建一个images文件夹
    'images' => [
        'driver' => 'local',
        'root' => storage_path('images'),
    ],

  4-2. FileController.php文件中的uploadImg()方法可以这样写：

    public function uploadimg(Request $request)
    {
        $file = $request->file('file');
        // 图片是否上传成功
        if ($file->isValid()) {
            // 扩展名
            $ext = $file->getClientOriginalExtension();
            // 生成唯一的文件名
            $filename = date('YmdHis') . '-' . uniqid() . '.' . $ext;
            // 临时文件的绝对路径
            $realPath = $file->getRealPath();
            // 使用我们新建的storage/images本地存储空间（目录）
            Storage::disk('images')->put($filename, file_get_contents($realPath));
        }
    }

5.至此，文件上传就搞定啦，赶快试试吧！o(￣▽￣)ブ