Laravel API - Fájl feltöltése

Szerző: Sallai András
Copyright © Sallai András, 2022
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Kép feltöltése

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Image extends Model
{
    use HasFactory;
    protected $fillable = ['name', 'path', 'productId'];
}

database/migrations/2022_05_09_112433_create_images_table.php

<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('path');
            $table->integer('productId')->nullable();
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

app/Http/Controllers/ImageController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Image;
 
class ImageController extends Controller
{
    public function store (Request $request) {
      request()->validate([
        'file' => 'required|image|mimes:jpg,png',
      ]);
 
      if ($request->hasFile('file')) {
        //Eredeti név lekérdezése
        $name = $request->file->getClientOriginalName();        
        //Feltöltés
        $path = $request->file->store('images', 'public');
 
        /* A storage/app/public könyvtárban létrehoz
        egy images könyvtárat, abba menti a fájlokat */
 
        //Eredeti és új név mentése adatbázisba
        $image = new Image();
        $image->name = $name;
        $image->path = $path;
        $image->save();
 
        return response()->json([
          "success" => true,
          "path" => $path,
          "name" => $name,
          "message" => "File successfully uploaded"
        ]);
      }
    }
}

Szűrés egyéb lehetőség:

'file' => 'required|image|mimes:png,jpg,gif|max:2048',

A fájl ide töltődik fel

storage/app/

A storage könyvtárban van egy public könyvtár. Ha olyan könyvtárra hivatkozunk, ami még nem létezik, automatikusan létrejön.

Feltöltött képfájl elérése

Engedélyezzük a storage könyvtár elérését egy link létrehozásával:

php artisan storage:link

Ezek után így érhető el:

http://localost:8000/storage/images/by6Pj6ozT5Zjt8PlYhDb7IdPywKKT8LxrpFJbnIg.png

JavaScript kliensoldalon

app.js

var fileUploadElem = document.querySelector('#imageFile');
var storeButton = document.querySelector('#storeButton');
var host = 'http://localhost:8000/api/';
 
const uploadFile = () => {
    const files = fileUploadElem.files;
    const formData = new FormData();
    formData.append('file', files[0]);
    let endpoint = 'imageup';
    let url = host + endpoint;
    fetch(url, {
        method: 'post',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        console.log(result);
    })
    .catch(err => {
        console.log(err);
    })
    ;
}
 
storeButton.addEventListener('click', () => {
    uploadFile();
})

Kép adatbázisban

A binary() egyenértékű a blob típussal.

$table->binary('image');

Tartalomjegyzék