< Laravel API

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

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');

Linkek

https://laravel.com/docs/9.x/filesystem (2022)

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData (2022)