Hyperf2.1框架文件上传,实现上传头像功能
今天用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\[email protected]');
控制器
/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"> 请上传你喜欢的头像,不传则系统默认生成</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.添加照片 点击上传
完
相关文章