关注我们

Laravel 8 - 图像上传

无涯教程将向您解释laravel 8图片上传示例，在这将向您展示laravel 8中的图像上传。此示例将帮助您laravel 8将图像上传到数据库。本文详细介绍了如何在laravel 8中上载和显示图像。在这里，创建带有预览功能的laravel 8图像上载的基本示例。

在此示例中将创建两条路由，一条用于get方法，另一条用于post方法。使用文件输入创建了简单的表单。因此，您必须简单地选择图像，然后将其上传到公用文件夹的“ images”目录中。因此，您必须简单地遵循以下步骤，并在laravel 8应用程序中获取图像上传。

第1步:安装Laravel 8

首先需要使用命令获得新的的Laravel 8版本应用程序，因为正在从头开始，所以打开终端或命令提示符并运行以下命令:

composer create-project --prefer-dist laravel/laravel blog

步骤2:创建路由

在下一步中，无涯教程将在web.php文件中添加新的两条路由。一种用于生成表单的路由，另一种用于post方法的路由，简单地按照下面列出的方式创建这两种路由：

routes/ web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageUploadController;
  
  
Route::get('image-upload'， [ ImageUploadController::class， 'imageUpload' ])->name('image.upload');
Route::post('image-upload'， [ ImageUploadController::class， 'imageUploadPost' ])->name('image.upload.post');

步骤3:创建控制器

第三步，无涯教程将创建新的ImageUploadController，在这里必须编写两个方法imageUpload()和imageUploadPost()。因此，一种方法将处理get方法，而另一种方法将用于post。因此添加以下代码。

app/Http/Controllers/ImageUploadController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class ImageUploadController extends Controller
{
     /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUpload()
    {
        return view('imageUpload');
    }
    
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUploadPost(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg，png，jpg，gif，svg|max:2048'，
        ]);
    
        $imageName = time().'.'.$request->image->extension();  
     
        $request->image->move(public_path('images')， $imageName);
  
        /* Store $imageName name in DATABASE from HERE */
    
        return back()
            ->with('success'，'You have successfully upload image.')
            ->with('image'，$imageName); 
    }
}

存储文件夹中的存储图像

$request->image->storeAs('images'， $imageName);
  
//storage/app/images/file.png

在公用文件夹中存储图像

$request->image->move(public_path('images')， $imageName);
  
//public/images/file.png

s3中的存储图像

$request->image->storeAs('images'， $imageName， 's3');

步骤4:创建展示页面

在最后一步，无涯教程需要创建imageUpload.blade.php文件，在该文件中将使用文件输入按钮创建表单。

resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel 8 image upload example - learnfk.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
    
<body>
<div class="container">
     
    <div class="panel panel-primary">
      <div class="panel-heading"><h2>laravel 8 image upload example - learnfk.com</h2></div>
      <div class="panel-body">
     
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
        </div>
        <img src="images/{{ Session::get('image') }}">
        @endif
    
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    
        <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
    
                <div class="col-md-6">
                    <input type="file" name="image" class="form-control">
                </div>
     
                <div class="col-md-6">
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
     
            </div>
        </form>
    
      </div>
    </div>
</div>
</body>
  
</html>

现在，您可以运行并检查它。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

好记忆不如烂笔头。留下您的足迹吧 :)