Laravelオンライン教育開発__画像のアップロード

オンライン教育開発のための画像アップロード

より良いユーザーエクスペリエンスのために、アバターをアップロードする機能が実現されています。

1.プラグインWebuploaderを使用して、アドレスをダウンロードします。http：//fex.baidu.com/webuploader/

ダウンロード後にビューにインポート

ここのコードはインポートする必要があることに注意してください

プラグインはすでにコードブロックをパッケージ化しているので、それをコピーしてインポートするだけです。コードアドレス：http://fex.baidu.com/webuploader/js/getting-started.js

2.パスと配信サーバーを変更する

（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);
    }

注：ここでのストレージはソフト接続である必要があります（ショートカット;作成が成功すると、パブリックディスクの内容は/ public / stroageに同期されます）：コマンドラインを使用して接続を生成しますphp artisan storage：link
4.に戻ります。レイヤーを表示し、受信したパスの値を隠しドメインに渡します。

5.画像を置き換えるのではなく追加する問題を回避するために、導入されたavatar.jsファイルに次のコードを挿入します。

結果は以下の通りです

アバターを変更すると、上記のアップロードされた画像が置き換えられます

これまでのところ、画像のアップロードを実現してください！！