Laravel之文件上传

来源：互联网发布：c语言基础教程pdf 编辑：程序博客网时间：2024/05/17 15:05

Laravel之文件上传

一、准备工作

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

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

HTML代码：

    <div id="uploader-demo">        <div id="filePicker">选择图片</div>    </div>

自己封装的webuploader的函数：

函数参数说明：

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

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

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

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( '<div id="file_id" class="item">' +            '<h4 class="info">' + file.name + '</h4>' +            '<p class="state">等待上传...</p>' +            '</div>' );    });    // 文件上传过程中创建进度条实时显示。    fileUploader.on( 'uploadProgress', function( file, percentage ) {        var $li = $( '#file_id' ),            $percent = $li.find('.progress .progress-bar');        // 避免重复创建        if ( !$percent.length ) {            $percent = $('<div class="progress progress-striped active">' +                '<div class="progress-bar" role="progressbar" style="width: 0%">' +                '</div>' +                '</div>').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怎么处理文件

通过 Artisan 命令来创建一个文件控制器，命令如下：
```
php artisan make:controller FileController
```

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

配置路由，在routes.php文件下添加路由如下：
Route::post('uploadImg', 'FileController@uploadImg');

在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);    }}

如果你打算将文件存储到 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(￣▽￣)ブ

阅读全文

0 0