ネビ活 | ネットビジネス生活

ネットxお金のスキルを作り、未来永劫豊かに暮らす事を目指すサイト

Laravelで画像、動画などのファイルをアップロードする簡単な方法。

更新日:

Laravelで画像や動画、音声、PDFとか、そういうファイルをアップロードするのってどうやればいいの?

というわけで、ここではLaravelサイトにファイルアップロードフォームを作り、画像などのファイルをアップロードする超基本的な方法を、初心者でもできるように解説します。

データベース不要で、シンプルです。

 

ちなみに、過去のチュートリアルをやってる場合は、この記事ではなく、こっちを見た方がいいよ。

Laravel6チュートリアル:画像投稿機能を作って投稿に表示させよう!

Neby

 

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

Laravelで画像、動画などのファイルをアップロードする簡単な方法。

手順は以下の通りになります。

  1. publicフォルダにシンボリックリンクを貼る
  2. ブレードにファイルアップロードフォームを作る
  3. コントローラーに画像保存命令を書く
  4. ルートを設定する

の4ステップでファイルのアップロードができます。

 

Laravelファイルアップロード1:publicフォルダにシンボリックリンクを貼る

そもそも、画像や音声などのファイルってLaravelのどのフォルダにアップロードされるの?
storage\appフォルダにアップロードされるんだ。
Neby

 

まず、Laravelには、storageというフォルダがあります。

 

この中のappというフォルダの中に画像などのファイルはアップロードします。

 

ただ、Laravelでは、ブラウザから誰でもアクセスできるフォルダは、publicフォルダだけです。

なので、仮にstorage\appフォルダにファイルをアップロードできたとしても、
ブラウザから参照できない(見れない)という事になってしまいます。

 

意味ないじゃん(汗)
だからpublicフォルダとstorageフォルダをつなげるためにシンボリックリンクを貼るんだ。
Neby

 

というわけで、シンボリックリンクをまずは作ります。

 

コマンドプロンプト(Shell/ターミナル)を開きます。

 

まず、cd Laravelプロジェクトフォルダのパス と入力、Enterします。

(例 cd D:\XAMPP\htdocs\newsite)

 

Neby

 

続いて、

php artisan storage:link

と入力、Enterします。

 

 

これで、publicフォルダを見てください。

storageというフォルダができてるはずです。

 

同じように、フォルダを戻って、storage\appフォルダに行くと、publicフォルダができてます。

 

このstorage\app\publicフォルダ内に保存された、画像、音声、動画、PDFなどなどのファイルは、ブラウザから見れるというわけです。

 

では、実際に、ファイルをアップロードするフォームを作りましょう。

 

Laravelファイルアップロード2:ブレードにフォームを作る

では、まず空のテキストエディタを開いてください。

そして、以下をコピーします。

コピーしました

コピー

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>newsite</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <div class="wrapper">
    <div class="header"><h1>投稿ページ</h1></div>
    <div class="content_wrapper">
    <div class="content2">
        <form action="/newimgsend" method="post" enctype="multipart/form-data">
            @csrf            
            <p>&nbsp;</p>
            <p>画像をアップロード</p>
            <input type="file" name="post_img">            
            <p>&nbsp;</p>
            <input type="submit" class="submitbtn">
        </form>    
    </div>
    </div>
    </div>
</body>
</html>

 

img.blade.phpという名前を付けて、resources\viewsフォルダに保存してください。

 

CSSも作っておこう

CSSもないと殺風景すぎるので、一応作っておきます。

publicフォルダにcssフォルダを作り、以下をコピーして、style.cssとして保存します。(過去のチュートリアルをやってる場合はすでに記述があるので不要です。)

コピーしました

コピー

.wrapper{
    width: 1000px;
    background-color: #20f3f3;
    min-height:700px;
    /* border: 1px solid #ccc; */
    margin: 0 auto;
}

.header{
    background-color: #707aff;
    margin: 0 0 10 0px;
    height: 100px;
    padding: 20px;
    color:white;
}

.content_wrapper{
    width: 1000px;
    min-height:500px;
    text-align: center;
}

.content2{
    display: inline-block;
    text-align: left;
    width:690px;
    min-height:500px;
    background-color: #ffffff;
    border: 5px solid  #707aff;
    border-radius: 10px;
    margin: 20px 0;
    padding: 10px;
}

.submitbtn{
    background-color: #735eff;
    width: 100px;
    font-size: 20px;
    color: white;
}

 

 

 

Laravelファイルアップロード3:コントローラーにファイル保存命令を書く

次にコントローラーです。

先程のコマンドプロンプトに今度は、

php artisan make:controller UploadController

と入力、Enterしてください。

 

app\Http\Controllersフォルダ内にUploadController.phpができてるはずなので、それをテキストエディタで開いてください。

 

下の画像のclass~{ }の中に黄枠部分を追記します。

 

コピーしました

コピー

public function postimg (){
    return view ('img');
}

public function saveimg (Request $request){
    $request->file('post_img')->store('public/post_img');
    return redirect ('/create3');
}

これで、上書き保存してください。

上の、function postimg は、投稿画面を表示する命令が書かれています。

下の function saveimg は、ファイルをpublicフォルダにシンボリックリンクした、storage\post_imgフォルダに保存(store)後、元のページにリダイレクトする命令になっています。

 

Laravelファイルアップロード4:ルートを設定する

次にroutes\web.phpを開きます。

routes web.php ルート

 

以下を追記します。

 

コピーしました

コピー

// 画像投稿ページを表示
Route::get('/create3', 'UploadController@postimg');
// 画像投稿をコントローラーに送信
Route::post('/newimgsend', 'UploadController@saveimg');

そして、上書き保存してください。

これで、完成です。

 

実際にLaravelにファイルをアップロードしてみよう!

では、実際に画像などのファイルをブラウザからアップロードしてみましょう。

 

まず、Laravelサイトをブラウザ表示するために、

先程のコマンドプロンプトを開き、

php artisan serve と入力、Enterしてください。

 

そして、ブラウザを開いて、http://localhost:8000/create3 を開いてください。

こういう投稿ページが出るので、参照ボタンを押して、画像などの適当なファイルを選択し、送信ボタンを押してみてください。

その後、public\storageフォルダを開くと、post_imgというフォルダが自動生成され、
その中にアップロードしたファイルが入ってるはずです。

仮に上の図のアップロードしたこの画像をブラウザで表示したい場合は、

http://localhost:8000/storage/post_img/6LuqLN2nnmJLq9IP6kYNjmuIQnsNjaA6DXBJ7F89.jpeg

と入力すれば、その画像が表示されます。

 

つまり、/storage/post_img/xxx.jpegのようなアドレスで、ファイルに直接アクセスできるようになるという事です。

 

ファイルは、コントローラーに書いたstoreというメソッドを使う事で、ランダムな英字名で保存されるんだ。
Neby
ファイル名を指定して保存ってできないの?

storeAs というメソッドを使えば可能。例えば、自動的に、1.jpg, 2.jpg, 3.jpg みたいにして使いたい場合なんかは、下のチュートリアルで本格的な使い方を教えてるから参考にしてみて↓

Laravel6チュートリアル:画像投稿機能を作って投稿に表示させよう!

Neby

 

画像保存の命令解説

では、どういう流れで、この画像が保存されるのか、実際に書いたコードと照らし合わせていきましょう。

まず、ブレードのフォームにはこう書きました。

<form>の所に、enctype="multipart/form-data"と書いてます。これは、ファイルをフォーム送信する時に必ず必要なタグです。これがないと、ファイル送信ができません。

次に<input type="file" name="post_img">が、ファイル選択ボタンなんですが、ここで、name="post_img"としています。これがファイル名(というかフォルダ名)になってるわけです。

 

そして、これを送信すると、/newimgsendというURLに飛ばされ、
web.phpで、UploadControllerのsaveimgメソッドにそのまま渡されます。

 

コントローラーのfunciton saveimgでは、post_imgというnameのファイルが来たら、

storage\app\public\post_imgフォルダにそれをstore(保存)せよ。その後、元の投稿ページにリダイレクトせよ。という命令が書いてあります。

このstoreメソッドによって、画像などのファイルが自動的に保存されるわけです。

 

Laravelのファイルアップロード自体は、

$request->file('post_img')->store('保存先');

と指定すれば、なんでもアップロードできるので、とてもシンプルかつ簡単です。

 

ただ、じゃあアップロードした画像を実際に自動的に投稿に表示したりとかはどうやるの?っていう場合は、下のチュートリアルでやってますので、ぜひチャレンジしてみてください。

Laravel6チュートリアル:画像投稿機能を作って投稿に表示させよう!

 

ところで、あなたが今Laravelを学んでる理由ってなんですか?

稼げると聞いたから?

 

どれくらい上達すれば稼げるのか?本当にそんな高給を稼げるのかの現実を知ってますか?

詳しくは下の記事に本音の裏事情を書いてるので参考にしてくださいね。

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-PHP Laravel入門

Copyright© ネビ活 | ネットビジネス生活 , 2020 All Rights Reserved.