Letar du efter hur du laddar upp och komprimerar bilder i Laravel? Laravel \u00e4r ett enkelt s\u00e4tt f\u00f6r fil\u00f6verf\u00f6ring. Och att komprimera bilderna vid tidpunkten f\u00f6r uppladdningen \u00e4r en bra praxis. I den h\u00e4r artikeln visar jag dig hur du laddar upp och komprimerar bilder i Laravel.<\/p>\n
Bilder spelar en viktig roll p\u00e5 din webbplats. Bilder ger b\u00e4ttre UX och i\u00f6gonfallande upplevelse f\u00f6r bes\u00f6karna. Men samtidigt kan det ocks\u00e5 d\u00f6da webbplatsens prestanda. Tunga bilder saktar ner webbplatsen. Som ett resultat tar det l\u00e5ng tid att ladda din webbplats. Anv\u00e4ndare gillar inte l\u00e5ngsamma webbplatser. Om det tar l\u00e4ngre tid att ladda din webbplats \u00e4r det en stor chans att du tappar din publik. Standard laddningstid f\u00f6r en webbplats \u00e4r 2 sekunder. Du b\u00f6r se till att din webbplats laddas inom tv\u00e5 sekunder.<\/p>\n
\u00c4ven om det finns flera faktorer som m\u00e5ste tas i beaktande f\u00f6r att f\u00f6rb\u00e4ttra sidhastigheten, \u00e4r en av dem anv\u00e4ndningen av optimerade bilder. Komprimering av bilder minskar storleken p\u00e5 din originalbild utan att f\u00f6rlora kvaliteten. Det hj\u00e4lper till att \u00f6ka webbplatsens hastighet.<\/p>\n
Med detta sagt, l\u00e5t oss se hur man laddar upp och komprimerar bilder i Laravel.<\/p>\n
Laravel ger ett rent s\u00e4tt att ladda upp bilderna. F\u00f6r att komma ig\u00e5ng med det m\u00e5ste vi f\u00f6rst skapa en katalog d\u00e4r vi kommer att lagra bilderna. \u00d6ppna kommandotolken i rotkatalogen och k\u00f6r kommandot nedan.<\/p>\n
php artisan storage:link<\/code><\/pre>\nDetta kommando skapar en "lagring" -katalog under "offentlig" -mappen.<\/p>\n
Skapa sedan ett formul\u00e4r med inmatnings- och skicka-knappen genom att l\u00e4gga till koden nedan i din bladfil.<\/p>\n
<form action=\"{{ url('ROUTE_HERE') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\nI ovanst\u00e5ende HTML har jag lagt till en filinmatning med namnet ’profile_image’. Jag har ocks\u00e5 lagt till {{ csrf_field() }}<\/code>som kr\u00e4vs f\u00f6r att skicka Laravel-formul\u00e4r.<\/p>\nNu, f\u00f6rutsatt att du skickar postf\u00f6rfr\u00e5gan till din controllerns store()<\/code>metod, skriv en kod som lagrar bilden p\u00e5 servern enligt nedan.<\/p>\npublic function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Compress Image Code Here\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\nDen h\u00e4r koden skapar ett unikt filnamn och lagrar filen i katalogen ’profile_images’. Laravel genererar automatiskt en ’profile_images’ -katalog under ’public \/ storage’ om den inte finns.<\/p>\n
Som sagt tidigare \u00e4r det b\u00e4ttre att optimera bilden vid uppladdningen. Vi \u00e4r klara med att ladda upp en bild. Nu m\u00e5ste vi komprimera det. Jag ska t\u00e4cka 2 tj\u00e4nster – TinyPNG<\/a> och reSmush.it<\/a> som ger API: erna f\u00f6r att komprimera bilder i farten. L\u00e5t oss se dem en efter en.<\/p>\nKomprimera bilder med TinyPNG i Laravel<\/h3>\n