在线教育开发之图片上传
为了用户更好的体验,实现用户上传头像的功能。
1.使用插件webuploader,下载地址:http://fex.baidu.com/webuploader/
下载完成之后引入到视图中
注意,这里的代码需要引入进来
由于插件已经打包了代码块,只需要复制进去之后引入即可。代码地址:http://fex.baidu.com/webuploader/js/getting-started.js
2.修改路径和传递的服务器
(需要修改两处,下面还有一处需要修改,这里省略,修改方式一样)这里的文件接收服务器端是已经定义好的路由;
3.在控制器端接收代码;
public function webuploader(Request $request)
{
//判断是否有文件上传和判断是否长传成功
if ($request->hasFile('file') && $request->file('file')->isValid()){
//重命名
$filename = sha1(time().$request->file('file')->getClientOriginalName()).'.'.$request->file('file')->getClientOriginalExtension();
//文件保存移动
Storage::disk('public')->put($filename,file_get_contents($request->file('file')->path()));
$msg = [
'code' => 1,
'msg' => '上传成功',
'path' => '/storage/'.$filename,
];
}else{
$msg = [
'code' => 0,
'msg' => $request->file('file')->getErrorMessage(),
];
}
return response()->json($msg);
}
注意:这里的Storage需要是软连接(快捷方式;创建成功后,Public磁盘中的内容会被同步到/public/stroage 下):使用命令行去生成连接 php artisan storage:link
4.完成之后返回给视图层,将接受到的path值传递给隐藏域;
5.为了避免图片追加,而不是替换的问题,我们在引入的avatar.js文件中插入以下代码;
实现结果如下
更换头像是会替换上面已经上传的图片
至此,实现图片上传!!