Ausführliche Erklärung zur Implementierung von Ajax zum Hochladen von Benutzeravataren in Laravel-Projekten

Im folgenden Abschnitt der Kolumne „Laravel-Tutorial“ erfahren Sie, wie Sie das Hochladen von Benutzeravataren mit Ajax im Laravel-Projekt implementieren. Ich hoffe, dass es für Freunde hilfreich ist, die es benötigen! Implementierung von Ajax zum Hochladen von Benutzeravataren im Laravel-Projekt

Beim Schreiben von Webprogrammen stoßen wir häufig auf ein klassisches Datei-Upload-Szenario: das Hochladen von Avataren (Bildern). Basierend auf dem Streben nach der besten Benutzererfahrung möchte ich über den zuvor im Laravel-Projekt implementierten Ajax-Upload-Avatar schreiben.

1. Konfigurieren Sie das Routing

Legen Sie das Routing in Laravels routes.php fest:

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

2. Konfigurieren Sie den Controller

Fügen Sie in UsersController das entsprechende hinzu <code>avatar- und avatarUpload-Methoden in .php Ersteres wird zum Rendern der Ansicht verwendet, und letzteres verarbeitet die tatsächlich hochgeladene Bilddatei. Ajax上传头像。

1.配置路由

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

 public function avatar()
    {

        return view('users.avatar');
    }

  public function avatarUpload()
    {
    //some codes to deal with upload avatar
    }

2.配置控制器

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

<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>

3.编写前端代码

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

$(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);

        }
    }

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

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),
                    ]
                );
            }



    }

4.处理上传的图片

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

sudo chmod -R 777 uploads/

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

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

            return Response::json($response);
        }

    }

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

File::exists($username) or File::makeDirectory($username);

5.最后

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

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

   $user->avatar = your_avtar_upload_path;
   
   $user->save();

2. 更新数据库中用户的avatar字段，大概是这样的：在avatarUpload方法返回数据之前，使用下面的类似语句：

   function showResponse(response)  {
   
   }

3. 如果你还想更进一步改善体验，提供一些图片的裁剪和添加滤镜等功能，可以同时使用 Intervention/Image php包和Jcrop js图片裁剪实现，比如在：

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

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

   rrreee

   就可以在前端实现图片裁剪，然后将相应的裁剪数据如裁剪图片的height,width,x-align.y-alignrrreee

   3. Schreiben Sie den Frontend-Code

   Damit wird tatsächlich der Stil in der Ansichtsdatei avatar.blade.php im entsprechenden users/festgelegt > Ordner, jedes Tag des folgenden HTML kann class und id entsprechend Ihrer eigenen Situation festlegen:
rrreee

implementiert Ajax-Anfragen in js. Das Ajax verwendet hier den Drittanbieter des Jquery-Plug-ins http://malsup.com/jquery/form/:

rrreee

4. Hochgeladene Bilder verarbeiten

🎜Zurück zu avatarUpload in <code>UsersController.php Mit der Methode code> code> können Sie nun das hochgeladene Bild verarbeiten: 🎜rrreee<blockquote>🎜Hinweis: Stellen Sie vor dem Hochladen sicher, dass <code>uploads/ im Verzeichnis public/ von Laravel erstellt wurde code>-Ordner und erteilen Sie entsprechende Berechtigungen, wie zum Beispiel: 🎜rrreee🎜In der obigen avatarUpload-Methode gibt es eine wrongTokenAjax-Methode, die zum Überprüfen des verwendet wird token-Wert des Laravel-Systems, fügen Sie auch UsersController.php hinzu: 🎜rrreee

5

🎜Hier ist eine einfache Demo von Ajax Das Hochladen von Bildern ist abgeschlossen. In der tatsächlichen Entwicklung müssen wir noch die folgenden Probleme berücksichtigen: 🎜

1. 🎜Erstellen Sie verschiedene Ordner entsprechend dem Benutzernamen oder der Benutzer-ID. Diese können zuvor verwendet werden $file->move($destinationPath, $filename) in der Methode avatarUpload 🎜rrreee🎜
2. 🎜 zum Aktualisieren der Datenbank Der Avatar des Benutzers Das Feld „code>“ sieht folgendermaßen aus: Bevor die Methode „<code>avatarUpload“ Daten zurückgibt, verwenden Sie eine ähnliche Anweisung unten: Funktionen zum Hinzufügen von Filtern können Sie gleichzeitig mit dem PHP-Paket „Intervention/Image“ und dem js-Bildzuschnitt verwenden: 🎜rrreee🎜, wenn das Bild erfolgreich zurückgegeben wurde, einfach in $('#user- avatar').attr('src',response.avatar)Nach der Ausführung von: 🎜rrreee🎜 können Sie das Bildzuschneiden im Frontend implementieren und dann die entsprechenden Zuschneidedaten als height,width,x-align.y-align können mithilfe von Intervention/Image zur Verarbeitung an das Backend übergeben werden Dann ist die Bildverarbeitung im Backend ein Kinderspiel! 🎜🎜🎜🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung von Ajax zum Hochladen von Benutzeravataren in Laravel-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!