{"id":28741,"date":"2021-05-27T12:11:00","date_gmt":"2021-05-27T09:11:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28741"},"modified":"2021-10-17T04:37:08","modified_gmt":"2021-10-17T01:37:08","slug":"ladda-upp-och-andra-storlek-pa-flera-bilder-i-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/ladda-upp-och-andra-storlek-pa-flera-bilder-i-laravel\/","title":{"rendered":"Ladda upp och \u00e4ndra storlek p\u00e5 flera bilder i Laravel"},"content":{"rendered":"<p>F\u00f6rutom den h\u00e4r bloggen driver jag en <a href=\"https:\/\/www.youtube.com\/channel\/UCosi8Kv8-EPLt5TBJLlsWJA\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">YouTube-kanal<\/a> d\u00e4r jag delar videotutorialerna. Nyligen fr\u00e5gade en av YouTube-kanalprenumeranterna om att \u00e4ndra storlek p\u00e5 flera bilder i Laravel. De vill \u00e4ndra storlek p\u00e5 flera bilder p\u00e5 en g\u00e5ng. I den h\u00e4r artikeln studerar vi hur man laddar upp och \u00e4ndrar storlek p\u00e5 flera bilder i Laravel.<\/p>\n<p><a href=\"https:\/\/image.intervention.io\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Intervention Image<\/a> \u00e4r ett bibliotek med \u00f6ppen k\u00e4llkod som l\u00e5ter oss manipulera bilder. Jag ska anv\u00e4nda detta bibliotek f\u00f6r att \u00e4ndra storlek p\u00e5 bilder.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20446-6081f2f1b1c63.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20446-6081f2f1b1c63.png\" alt=\"Ladda upp och \u00e4ndra storlek p\u00e5 flera bilder i Laravel\" ><\/a><\/p>\n<h3>Komma ig\u00e5ng<\/h3>\n<p>F\u00f6r att n\u00e5 v\u00e5rt m\u00e5l m\u00e5ste du installera och konfigurera Intervention Image-biblioteket i Laravel-projektet. \u00d6ppna terminalen i din projektkatalog och k\u00f6r kommandot:<\/p>\n<pre><code>composer require intervention\/image<\/code><\/pre>\n<p>N\u00e4r biblioteket \u00e4r installerat \u00f6ppnar du <code>config\/app.php<\/code>filen och l\u00e4gger till tj\u00e4nsteleverant\u00f6rer, fasad i den. L\u00e4gg till tj\u00e4nsteleverant\u00f6rerna f\u00f6r detta paket i <code>$providers<\/code>matrisen.<\/p>\n<pre><code>InterventionImageImageServiceProvider::class,<\/code><\/pre>\n<p>L\u00e4gg till fasaden i <code>$aliases<\/code>matrisen.<\/p>\n<pre><code>'Image' =&gt; InterventionImageFacadesImage::class,<\/code><\/pre>\n<p>D\u00e4refter beh\u00f6ver vi en katalog d\u00e4r vi lagrar v\u00e5ra uppladdade filer. <a href=\"https:\/\/laravel.com\/docs\/master\/filesystem\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Laravel Filesystem<\/a> tillhandah\u00e5ller en offentlig disk f\u00f6r att lagra filerna. Den offentliga disken inneh\u00e5ller filer som \u00e4r offentligt tillg\u00e4ngliga. Du hittar de uppladdade filerna i <code>storage\/app\/public<\/code>mappen. F\u00f6r att komma \u00e5t dessa filer p\u00e5 webben m\u00e5ste du skapa en symbolisk l\u00e4nk fr\u00e5n <code>public\/storage<\/code>till <code>storage\/app\/public<\/code>.<\/p>\n<p>Skapa en symbolisk l\u00e4nk med kommandot:<\/p>\n<pre><code>php artisan storage:link<\/code><\/pre>\n<p>Detta kommando skulle skapa en lagringsmapp under den offentliga katalogen. Det \u00e4r h\u00e4r vi lagrar v\u00e5ra filer.<\/p>\n<h3>Ladda upp och \u00e4ndra storlek p\u00e5 bilder i Laravel<\/h3>\n<p>F\u00f6r att ladda upp filer p\u00e5 en server beh\u00f6ver du ett formul\u00e4r. L\u00e5t oss skapa ett formul\u00e4r d\u00e4r du kan v\u00e4lja flera filer att ladda upp p\u00e5 en server. Nedan f\u00f6ljer en exempelkod av formul\u00e4ret som kommer att finnas i din vyfil.<\/p>\n<pre><code>&lt;form action=\"{{ url('ROUTE HERE') }}\" method=\"post\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"exampleInputFile\"&gt;File input&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"file\" name=\"profile_image[]\" id=\"exampleInputFile\" multiple \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0&lt;button type=\"submit\" class=\"btn btn-default\"&gt;Submit&lt;\/button&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>I formul\u00e4ret har jag tagit ett filinmatningsnamn som &#8217;profile_image []&#8217; som skickar en rad filer till servern. Jag lade ocks\u00e5 till ett attribut &#8217;multipel&#8217; som l\u00e5ter oss v\u00e4lja flera filer. Ers\u00e4tt platsh\u00e5llaren ROUTE_URL med ditt faktiska v\u00e4rde.<\/p>\n<p>Eftersom vi beh\u00f6ver ladda upp och \u00e4ndra storlek p\u00e5 bilderna, l\u00e4gg till tv\u00e5 fasader i kontrollen enligt f\u00f6ljande.<\/p>\n<pre><code>&lt;?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image; \/\/Intervention Image\nuse IlluminateSupportFacadesStorage; \/\/Laravel Filesystem\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\n}<\/code><\/pre>\n<p>Genom att l\u00e4gga till fasaden kan du ange storleksfunktionerna i Intervention Image-biblioteket. I koden nedan laddar jag upp filerna p\u00e5 tv\u00e5 platser. En \u00e4r originalbilden. Den andra finns under miniatyrkatalogen. Vi laddar f\u00f6rst upp originalbilden i miniatyrmappen och \u00e4ndrar sedan storlek p\u00e5 den.<\/p>\n<pre><code>public function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if ($request-&gt;hasFile('profile_image')) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach($request-&gt;file('profile_image') as $file){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $file-&gt;getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $file-&gt;getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.uniqid().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Storage::put('public\/profile_images\/'. $filenametostore, fopen($file, 'r+'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Storage::put('public\/profile_images\/thumbnail\/'. $filenametostore, fopen($file, 'r+'));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)-&gt;resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint-&gt;aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img-&gt;save($thumbnailpath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_URL')-&gt;with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n<p>H\u00e4r \u00e4ndrar vi storleken p\u00e5 bilden proportionellt. Genom att g\u00f6ra det beh\u00e5ller vi bildf\u00f6rh\u00e5llandet och bilden sk\u00e4rs inte av. Jag passerar bredden som 400 och h\u00f6jden som 150. Du kan \u00e4ndra dessa v\u00e4rden enligt dina krav.<\/p>\n<p>Forts\u00e4tt och testa det. Du kommer att f\u00e5 storleksversionen av uppladdade bilder i katalogen &#8217;lagring \/ profil_bilder \/ miniatyrbild&#8217;.<\/p>\n<p>Om du letar efter h\u00e5rd sk\u00f6rd, byt ut nedanf\u00f6r raderna<\/p>\n<pre><code>$img = Image::make($thumbnailpath)-&gt;resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint-&gt;aspectRatio();\n});\n$img-&gt;save($thumbnailpath);<\/code><\/pre>\n<p>Med<\/p>\n<pre><code>$img = Image::make($thumbnailpath)-&gt;resize(100, 100)-&gt;save($thumbnailpath);<\/code><\/pre>\n<p>Jag hoppas att du f\u00f6rst\u00e5r hur du laddar upp och \u00e4ndrar storlek p\u00e5 flera bilder i Laravel. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-laddar-jag-upp-filen-till-s3-med-laravel-filesystem\/\" title=\"Hur laddar jag upp filen till S3 med Laravel Filesystem\">Hur laddar jag upp filen till S3 med Laravel Filesystem<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-tar-backup-av-laravel-application\/\" title=\"Hur man tar backup av Laravel Application\">Hur man tar backup av Laravel Application<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-integrerar-mailchimp-nyhetsbrev-i-laravel-application\/\" title=\"Hur man integrerar MailChimp nyhetsbrev i Laravel Application\">Hur man integrerar MailChimp nyhetsbrev i Laravel Application<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Letar du efter hur du laddar upp och \u00e4ndrar storlek p\u00e5 flera bilder i Laravel? I den h\u00e4r artikeln visar vi dig hur du utf\u00f6r denna uppgift med hj\u00e4lp av Intervention Image<\/p>\n","protected":false},"author":1,"featured_media":21676,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[503],"tags":[850],"class_list":["post-28741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel2-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/28741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=28741"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/28741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/21676"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=28741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=28741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=28741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}