laravel在线教育开发__图片上传

在线教育开发之图片上传

为了用户更好的体验，实现用户上传头像的功能。

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文件中插入以下代码；

实现结果如下

更换头像是会替换上面已经上传的图片

至此，实现图片上传！！