Hyperf2.1框架文件上传，实现上传头像功能

swoole  /  管理员 发布于 2年前   2317

今天用hyperf2.1框架实现头像上传功能，看看手册的介绍

文件系统组件集成了 PHP 生态中大名鼎鼎的 League\Flysystem (这也是 Laravel 等诸多知名框架的底层库)。通过合理抽象，程序不必感知存储引擎究竟是本地硬盘还是云服务器，实现解耦。本组件对常用的云存储服务提供了协程化支持。

开始功能开发

安装组件

composer require hyperf/filesystem

生成配置文件

php bin/hyperf.php vendor:publish hyperf/filesystem

就会生成 config/autoload/file.php 文件。在该文件中设置默认驱动，并配置对应驱动的 access key、access secret 等信息就可以使用了。

配置:

    'default' => 'local',
    'storage' => [
        'local' => [
            'driver' => \Hyperf\Filesystem\Adapter\LocalAdapterFactory::class,
            //'root' => __DIR__ . '/../../runtime',
            'root' => __DIR__ . '/../../public/upload',
        ],

所以后面上传的头像就会上传到这个目录下

/hyperf/public/upload

使用

我把功能放在用户信息编辑里面开发

添加路由

//编辑用户信息  上传头像
Router::addRoute(['GET', 'POST', 'HEAD'],'edituser','App\Controller\UserController@edituser');

控制器

/hyperf/app/Controller/UserController.php

    //编辑用户信息  只留上传头像的代码 其他代码忽略了
    public function edituser(RenderInterface $render,RequestInterface $request,\League\Flysystem\Filesystem $filesystem)
    {
        if ($this->request->isMethod('post')) {
            //获取上传的文件
            $file = $this->request->file('face');
            if(isset($file)){
                //资源
                $stream = fopen($file->getRealPath(), 'r+');
                //重命名 拼接上传路径
                $rename = date('Y-m-d').uniqid() .'.'.explode('.',$file->getClientFilename())[1];
                $filesystem->writeStream('face/'.$rename, $stream);
                // Check if a file exists
                if(!$filesystem->has('face/'.$rename)){
                    return array('error' => 0, 'info' => '头像上传失败，请重新上传');
                }
                //把不是默认头像的旧头像删了
                if($this->session->get('user')->face != '/upload/face/mrface.jpg'){
                    // Delete Files
                    $filesystem->delete($this->session->get('user')->face);
                }
                fclose($stream);
                $data['face'] = '/upload/face/'.$rename;
            }
            //入库
            $res = Db::table('user')->where('user_id', $this->session->get('user')->user_id)->update($data);
            if($res){
                //重置session
                $this->session->set('user', Db::table('user')->where('user_id', $this->session->get('user')->user_id)->first());
                return array('error' => 1, 'info' => '编辑成功');
            }else{
                return array('error' => 0, 'info' => '编辑失败或没有变动');
            }
        }
        return $render->render('home/user/edituser',
            [
                'cats'=> $this->cats,
                'session' => $this->session->get('user')
            ]
        );
    }

前端

/hyperf/storage/view/home/user/edituser.blade.php

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-4 column"></div>
                <div class="col-md-4 column">
                    <h3 style="padding: 5rem;">hyperf {{$tdk['keywords']}}</h3>
                    <form class="form-horizontal" id="myForm" action="/user/edituser" method="post" role="form" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">账号</label>
                            <div class="col-sm-10"><input disabled="disabled" value="{{$session->email}}" class="form-control" id="inputEmail3" /></div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">用户</label>
                            <div class="col-sm-10"><input disabled="disabled" value="{{$session->username}}" class="form-control" /><span id="check_user" style="font-size: 8px;color: red;display: none;"></span></div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10"><input type="password" name="password" value="{{$session->password}}" class="form-control" id="inputPassword3" placeholder="请输入密码" /></div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile" class="col-sm-2 control-label">头像</label>
                            <div class="col-sm-10"><input type="file" name="face" id="exampleInputFile" placeholder="请输入密码"></div>
                            <p class="help-block">&nbsp;&nbsp;&nbsp; 请上传你喜欢的头像，不传则系统默认生成</p>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">提交</button></div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 column"></div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="/js/jquery.form.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // bind form using ajaxForm
        $('#myForm').ajaxForm({
            dataType:  'json',
            // success:   processJson
            success: function(data){ console.log(data);
                if (data.error == 1) {
                    alert(data.info);
                    //location.reload();
                    location.href = "/user/center";
                }else{
                    $("#check_user").html(data.info);
                    $("#check_user").css("display","block");
                };
            }
        });
    });
</script>

完事看看效果

1.添加照片  点击上传

完