วิธีการ Upload file ภาพ ขึ้น Server

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

makup
PHP Super Member
PHP Super Member
Posts: 397
Joined: 05/10/2020 10:02 am

วิธีการ Upload file ภาพ ขึ้น Server

Post by makup »

ในบทความนี้ จะมาแนะนำเกี่ยวกับวิธีการ Upload file , หากพูดถึงเรื่อง Upload file นั้น จะต้องมีการ Request มาจาก Form ก่อน ในการที่เรา Upload ลงไปใน Server จำลองฐานข้อมูลนั้น , จะต้องตรวจสอบก่อนว่า File ที่เรา Upload ไปนั้น มันจะซ้ำกับตัวเดิมหรือเปล่า ? , ในการ Upload file ของ Laravel Framework นั้น เป็นวิธีที่จะทำให้การ Upload file ของคุณนั้น , สะดวกสบายมากยิ่งขึ้น , ซึ่งหลักในการ Upload file นั้น มี API อยู่ 2 ตัว ได้แก่ Storage , File

วิธีการ Upload file ภาพ ขึ้น Server

Step 1 - ให้เข้าไปที่ route/web.php เพื่อจะไปตั้งค่า route ไว้สำหรับการ Upload file
90.JPG
90.JPG (15.04 KiB) Viewed 124 times
Step 2 - จากนั้นก็ทำการตั้งค่า Routing แล้วตั้งชื่อ Route ลงไป

ตัวอย่าง Code :

Code: Select all

Route::post('/createAirport', 'Controller_show_airport@store'); 
Step 3 - ให้เข้าไปที่หน้า view , แล้วทำการสร้าง File php มาสักหนึ่ง File
91.JPG
91.JPG (20.57 KiB) Viewed 124 times
Step 4 - จากนั้นก็ทำการสร้างหน้า Form view เพื่อใช้ในการ Uploa file , และจะต้องมีการกำหนดชื่อในส่วนกรอกข้อมูล , เพื่อใช้ในการป้อนข้อมูล เหมือนดังตัวอย่างรูปภาพนี้
92.JPG
92.JPG (176.45 KiB) Viewed 124 times
ตัวอย่าง Code :

Code: Select all

@extends('layouts.master')

@section('content')
                                                             
@if ($errors->any())                                         <!-- ตรวจสอบว่ามี Error ของ validation ขึ้นมาหรือเปล่า -->
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)             <!-- ทำการ วน Loop เพื่อแสดง Error ของ validation ขึ้นมาทั้งหมด -->
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
                                                            <!-- ref - https://laravel.com/docs/7.x/validation#DisplayingTheValidationErrors  -->
@endif


  <div class="table-responsive">
    <h2>เพิ่มข้อมูลตารางที่ตั้งสนามบิน</h2>
    <form action="/createAirport" method="post" enctype="multipart/form-data">   <!-- enctype="multipart....  ไว้สำหรับการ Upload ข้อมูล -->
        {{csrf_field()}}
        <div class="form-group">
            <label for="name">ชื่อที่ตั้งสนามบิน</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="Name">
        </div>
        <div class="form-group">
            <label for="description">ที่อยู่</label>
            <input type="text" class="form-control" name="address" id="address" placeholder="Address">
        </div>
        <div class="form-group">
            <label for="type">ละติจูล</label>
            <input type="text" class="form-control" name="latitude" id="latitude" placeholder="Latitude">
        </div>
         <div class="form-group">
            <label for="type">ลองติจูล</label>
            <input type="text" class="form-control" name="longitude" id="longitude" placeholder="Longitude">
        </div>
         <div class="form-group">
            <label for="image">รูปภาพ</label>
            <input type="file" class="form-control"  name="image_name" id="image">
        </div>

        <button type="submit" name="submit" class="btn btn-success">Submit</button>
    </form>
</div>

@endsection
Step 5 - ให้เข้าไปที่ app/Http/ , แล้วทำการสร้าง File Controller_show_airport.php
93.JPG
93.JPG (30.05 KiB) Viewed 124 times
Step 6 - จากนั้นก็ทำการ import API file กับ API Storage , เพื่อใช้สำหรับในการ Upload file
94.JPG
94.JPG (35.32 KiB) Viewed 124 times
Step 7 - จากนั้นก็ทำการสร้าง Function store() ขึ้นมา , แล้วทำการใส่ Function validate , เพื่อตรวจสอบว่า มีข้อมูลถูกส่งมาหรือยัง ?
95.JPG
95.JPG (46.43 KiB) Viewed 124 times
Step 8 - หากมีการ upload ชื่อ file ซ้ำ ให้ทำการเข้ารหัส base64_encode() , เช่น a.jpg = axafaf.jpg พอ upload ซ้ำ ก็จะได้ a.jpge = asfff.jpg , มีการกำหนด string '__' แล้วใช้ Function time() ใช้ตรวจสอบ วันที่ Upload file
96.JPG
96.JPG (28.82 KiB) Viewed 124 times
Step 9 - ดึงนามสกุล file เข้ามาทำงาน โดยใช้ Function getClientOriginalExtension() , จะมีการ Return ค่า กลับไปยัง ชื่อ File เดิม ที่ uploade แล้ว ซึ่งชื่อเดิมก็คือ ค่า empty , ก็จะเหลือแค่ นามสกุล File ที่เอาไว้ใช้งาน
97.JPG
97.JPG (37.59 KiB) Viewed 124 times
Step 10 - ทำการรวมตัวแปร $ext กับ $stringImageReformat เพื่อทำการต่อ string , ซึ่งจะได้นามสกุล File ออกมา
98.JPG
98.JPG (21.02 KiB) Viewed 124 times
Step 11 - จากนั้น ก็ทำการ Upload File ใน Local(Your computer) เพื่อ นำ File มาแสดงข้อมูล จากนั้นก็เรียกใช้งาน Module File โดยเอา File ภาพ ไปเก็บไว้ในตัวแปร , ส่วน $request รับค่ามาจาก Form view
99.JPG
99.JPG (12.3 KiB) Viewed 124 times

Step 12 - Upload File ไปเก็บไว้ใน Folder public/airport_image/
100.JPG
100.JPG (15.07 KiB) Viewed 124 times
Step 13 - จากนั้นก็ใช้คำสั่งเพิ่มข้อมูลลงไปในฐานข้อมูลพร้อม File ด้วย
101.JPG
101.JPG (27.16 KiB) Viewed 124 times
ตัวอย่าง Code Controller_show_airport.php :

Code: Select all

public function store(Request $request)
    {
         $request->validate([                                    
        'name' => 'required|unique:airports',               
        'address' => 'required',            
        'latitude' => 'required|numeric',
        'longitude' => 'required|numeric',                  

        'image_name' => 'required|file|image|mimes:jpeg,png,jpg|max:5000', 
                                                                            
        //dd($request->name);
    
        ]);
        
        

        //--------------------- Convert to image -------------------------//

        $stringImageReformat=base64_encode('_'.time());                 //หากมีการ upload ชื่อ file ซ้ำ ให้ทำการเข้ารหัส base64_encode() ...
                                                                        //.... เช่น a.jpg = axafaf.jpg พอ upload ซ้ำ ก็จะได้ a.jpge = asfff.jpg ....
                                                                        //....  มีการกำหนด string '__' แล้วใช้ Function time() ใช้ตรวจสอบ วันที่ Upload file 
        //dd($stringImageReformat);

        $ext = $request->file('image_name')->getClientOriginalExtension();   //ดึงนามสกุล file เข้ามาทำงาน โดยใช้ Function getClientOriginalExtension() ....
                                                                             //... จะมีการ Return ค่า กลับไปยัง ชื่อ File เดิม ที่ uploade แล้ว ซึ่ง .... 
                                                                            //... ชื่อเดิมก็คือ ค่า empty , ก็จะเหลือแค่ นามสกุล File ที่เอาไว้ใช้งาน
        //dd($ext);

        $imagename = $stringImageReformat.".".$ext;                     //ทำการรวมตัวแปร $ext กับ $stringImageReformat

        //dd($imagename);                                                 //สุ่มเข้ารหัสไปเรื่อยๆ เช่น "XzE1OTA3MDQyMzc=.jpg"


        //--------------------- Upload File ใน Local(Your computer) เพื่อ นำ File มาแสดงข้อมูล -------------------------//

        //ต้นทาง
        $imageEncoded = File::get($request->image_name);                                   //เรียกใช้งาน Module File โดยเอา File ภาพ ไปเก็บไว้ในตัวแปร , ส่วน ....
                                                                                           //... $request รับค่ามาจาก Form view , ส่วน image_name คือ ชื่อ Form view
        //ปลายทาง
        Storage::disk('local')->put('public/airport_image/'.$imagename,$imageEncoded);     //Upload File ไปเก็บไว้ใน Folder ปลายทาง โดยระบุปลายทาง public/Airport_image/
                                                                                           //ref - https://laravel.com/docs/6.x/filesystem#storing-files

        //--------------------- Insert -------------------------//

        $airport = New Airport;
        $airport->name = $request->name;
        $airport->address = $request->address;
        $airport->lati = $request->latitude;
        $airport->longti = $request->longitude;
        $airport->image = $imagename;                                                   //ไม่ได้จะเอา File จากการ Upload file ไปเก็บไว้ใน Tables ....
                                                                                        //... แต่จะเอาแค่ $imagename ไปเก็บไว้ใน Tables เฉยๆ

        $airport->save();
       

        //--------------------- flash message -------------------------//
        Session()->flash("success","บันทึกข้อมูลเรียบร้อยแล้ว !");                              //สร้าง สถานะ action ไว้สำหรับแจ้งเตือนข้อความ เช่น เพิ่มข้อมูล,แก้ไข,ลบ ...
                                                                                        //... ส่งการแจ้งเตือนไปยัง resources/view/layouts/admin.blade.php

                                                                                        //- ref - https://laravel.com/docs/7.x/session#flash-data

        return redirect('/');
    }
Step 14 - ต้องมีการ โยน File Storage->airport_image ไป วาง หรือ เชื่อมต่อ(Link) ที่ Folder public สำหรับแสดงข้อมูล
102-1.JPG
102-1.JPG (36.82 KiB) Viewed 124 times

Code: Select all

php artisan storage:link 

************************* มี Post ต่อ จาก Post เดิม ****************************
Last edited by makup on 23/10/2020 7:02 pm, edited 3 times in total.
makup
PHP Super Member
PHP Super Member
Posts: 397
Joined: 05/10/2020 10:02 am

Re: วิธีการ Upload file ภาพ ขึ้น Server

Post by makup »

Step 15 - ให้ทำการสร้าง Database table_airport , และทำการสร้าง ตาราง airports
103.JPG
103.JPG (16.81 KiB) Viewed 123 times
Step 16 - แล้วทำการเพิ่ม Fields สำหรับในการกำหนดประเภทข้อมูล ที่ต้องใช้ในการ Upload file , และเพิ่มข้อมูลลงไปใน Server จำลองฐานข้อมูลด้วย , แต่มีตัวอย่างของคำสั่ง MySQL สำหรับในการ Import ฐานข้อมูลลงไป โดยไม่ต้องเสียเวลากำหนด Fields , แต่ใน Field image นั้น จะต้องมีการกำหนดชนิดข้อมูล varchar(224)
104.JPG
104.JPG (27.26 KiB) Viewed 123 times
Step 17 - ให้ลองทำการกดปุ่ม Upload file ขึ้นไปบน server ดู
105.JPG
105.JPG (77.62 KiB) Viewed 123 times
Step 18 - จะเห็น File ภาพเหล่านี้ ได้มีการ Upload ขึ้นไป Server จำลองฐานข้อมูลแล้ว
106.JPG
106.JPG (27.96 KiB) Viewed 123 times
Step 19 - และมีการ Upload File บน Local ของคอมพิวเตอร์เราด้วย , เพื่อจะให้แสดงรูปภาพบนหน้าเว็บ หลังจากที่มีการใช้คำสั่ง php artisan storage:link ไป
100-1.JPG
100-1.JPG (24.64 KiB) Viewed 123 times
ผลลัพธ์ที่ได้
107.JPG

ข้อสรุป
ในการ Upload file image ขึ้น Server นั้น , จะต้องมีการ Upload ไว้ใน Local ซะก่อน จากนั้นก็จะมีการ Upload ไปไว้ใน Server จำลองฐานข้อมูล , จะต้องมีการ Import API Storage , API file เข้ามาทำงานด้วย , เพื่อจะสามารถ Upload File ได้ , หากต้องการจะศึกษาบทเรียน Laravel เพิ่มเติม สามารถศึกษาได้จากบทเรียนนี้

แหล่งอ้างอิงข้อมูล
https://laravel.com/docs/8.x/filesystem
https://medium.com/พื้นฐานการอัพโหลดรูปภาพ-บน-laravel-e889da7c73c
https://medium.com/ckartisan/upload-image-in-laravel-5-6-82b2e46795f7
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests