• 技术文章 >php框架 >Laravel

    详解Laravel项目中实现Ajax上传用户头像的方法

    藏色散人藏色散人2021-02-17 10:14:38转载235

    在Laravel项目中实现Ajax上传用户头像

    在编写web程序的过程中,经常会遇到一个经典的文件上传场景:上传头像(图片)。基于对最好的用户体验的追求,写一下之前在项目中实现在Laravel项目中的Ajax上传头像。

    1.配置路由

    在Laravel的routes.php中设置路由:

    Route::get('/avatar/upload','UsersController@avatar');
    Route::post('/avatar/upload','UsersController@avatarUpload');

    2.配置控制器

    UsersController.php中增加对应的avataravatarUpload这两个方法,前者用来渲染视图,后者处理实际上传的图像文件。

     public function avatar()
        {
    
            return view('users.avatar');
        }
    
      public function avatarUpload()
        {
        //some codes to deal with upload avatar
        }

    3.编写前端代码

    这其实就是在对应的users/文件夹的avatar.blade.php视图文件中设置样式,以下的HTML的各个标签可以根据自己的情况设置classid:

    <header class="profile-header">
     <img id="user-avatar" src="https://wt-prj.oss.aliyuncs.com/0d06af79c49d4e08abb1ab3f7ab6e860/772c684b-10a4-43cf-8eec-dda9e28a5a23.png">
    
    <p id="validation-errors"></p>
    
    <p class="avatar-upload" id="avatar-upload">
     {!! Form::open( [ 'url' => ['/avatar/upload/api'], 'method' => 'POST', 'id' => 'upload', 'files' => true ] ) !!}
    <a href="#" class="btn button-change-profile-picture">
    <label for="upload-profile-picture">
    <span id="upload-avatar">更换新头像</span>
     <input name="image" id="image" type="file" class="manual-file-chooser js-manual-file-chooser js-avatar-field">
    </label>
    </a>
    {!! Form::close() !!}
    
    
    <p class="span5">
    <p id="output" style="display:none">
    </p>
    </p>
    
    
    <span id="filename"></span>
     </header>

    在js中实现Ajax请求,这里的Ajax借助了Jquery的第三方插件http://malsup.com/jquery/form/:

    $(document).ready(function() {
                var options = {
                    beforeSubmit:  showRequest,
                    success:       showResponse,
                    dataType: 'json'
                };
                $('#image').on('change', function(){
                    $('#upload-avatar').html('正在上传...');
                    $('#upload').ajaxForm(options).submit();
                });
            });
        function showRequest() {
            $("#validation-errors").hide().empty();
            $("#output").css('display','none');
            return true;
        }
    
        function showResponse(response)  {
            if(response.success == false)
            {
                var responseErrors = response.errors;
                $.each(responseErrors, function(index, value)
                {
                    if (value.length != 0)
                    {
                        $("#validation-errors").append('<p class="alert alert-error"><strong>'+ value +'</strong><p>');
                    }
                });
                $("#validation-errors").show();
            } else {
    
              $('#user-avatar').attr('src',response.avatar);
    
            }
        }

    4.处理上传的图片

    回到UsersController.php中的avatarUpload方法,现在就可以处理上传上来的图片了:

    public function avatar()
        {
            $this->wrongTokenAjax();
            $file = Input::file('image');
            $input = array('image' => $file);
            $rules = array(
                'image' => 'image'
            );
            $validator = Validator::make($input, $rules);
            if ( $validator->fails() ) {
                return Response::json([
                    'success' => false,
                    'errors' => $validator->getMessageBag()->toArray()
                ]);
    
            }
    
            $destinationPath = 'uploads/';
            $filename = $file->getClientOriginalName();
            $file->move($destinationPath, $filename);
                    return Response::json(
                        [
                            'success' => true,
                            'avatar' => asset($destinationPath.$filename),
                        ]
                    );
                }
    
    
    
        }

    注:在上传之前,确认在laravel的public/目录下创建了uploads/文件夹,并给以相应的权限,如:

    sudo chmod -R 777 uploads/

    在上面的avatarUpload方法中,有一个wrongTokenAjax方法,这是用来检验Laravel体系的token值的,同样是在UsersController.php中添加:

     public function wrongTokenAjax()
        {
            if ( Session::token() !== Request::get('_token') ) {
                $response = [
                    'status' => false,
                    'errors' => 'Wrong Token',
                ];
    
                return Response::json($response);
            }
    
        }

    5.最后

    到这里一个简单的Ajax上传图片的demo就完成了,在实际的开发中,我们还需要考虑以下几个问题:

    1. 根据用户的不同用户名或者用户id来创建不同的文件夹,这些都可以在avatarUpload方法中 $file->move($destinationPath, $filename)之前使用

      File::exists($username) or File::makeDirectory($username);
    2. 更新数据库中用户的avatar字段,大概是这样的:在avatarUpload方法返回数据之前,使用下面的类似语句:

      $user->avatar = your_avtar_upload_path;
      
      $user->save();
    3. 如果你还想更进一步改善体验,提供一些图片的裁剪和添加滤镜等功能,可以同时使用 Intervention/Image php包和Jcrop js图片裁剪实现,比如在:

      function showResponse(response)  {
      
      }

      中,如果成功的返回图片,就在$('#user-avatar').attr('src',response.avatar)后执行:

       $('#user-avatar').Jcrop({
                      aspectRatio: 1,
                      onSelect: updateCoords,
                      setSelect: [120,120,10,10]
                      });

      就可以在前端实现图片裁剪,然后将相应的裁剪数据如裁剪图片的height,width,x-align.y-align等传到后端处理就可以,使用Intervention/Image的话,在后端处理图片就是轻而易举的事情了!

    以上就是详解Laravel项目中实现Ajax上传用户头像的方法的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:segmentfault,如有侵犯,请联系a@php.cn删除
    专题推荐:Laravel
    上一篇:解决laravel上传图片之后目录有图片,但访问不到(404)的问题 下一篇:关于laravel自定义模板指令-tojs
    第15期线上培训班

    相关文章推荐

    • 【laravel避坑笔记】laravel报错的问题42S01 420004 42S22]等...• 介绍利用组件开发与composer构建类Laravel框架• 详解laravel mysql表优化• laravel调度任务没有执行是什么情况• 详解composer创建laravel新项目流程

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网