Cách lưu trữ nhiều hình ảnh trong laravel

Hãy xem hướng dẫn trước đây của chúng tôi về cách tải lên một tệp duy nhất trong Laravel và lưu trữ trong cơ sở dữ liệu

Nếu bạn muốn biết cách xây dựng một chức năng để tải lên nhiều tệp hoặc hình ảnh cùng một lúc trong Laravel, thì bạn đang ở đúng nơi

Mục lục

Tải lên nhiều hình ảnh trong Laravel 9 Ví dụ

Tải lên nhiều tệp là một quy trình đơn giản để tải lên nhiều hình ảnh cùng một lúc. Người dùng chọn tệp bằng trường nhập tệp HTML và tải lên nhiều tệp/hình ảnh trong bộ lưu trữ

Laravel làm cho việc tải lên nhiều hình ảnh này trở nên dễ dàng và nó cũng cung cấp các phương thức sẵn có để áp dụng xác thực tệp và hình ảnh một cách dễ dàng

Tôi sẽ làm sáng tỏ về yêu cầu và đối tượng tệp để tải tệp lên và tạo một cơ sở dữ liệu và bảng hình ảnh mới để tải lên tệp hình ảnh. Cũng sẽ chia sẻ cách hiển thị bản xem trước của nhiều hình ảnh trước khi tải lên máy chủ. Tôi sẽ nhờ sự trợ giúp của Bootstrap 4 và jQuery để tạo biểu mẫu tải lên hình ảnh và xem trước hình ảnh

Hãy xem bài viết chi tiết của chúng tôi về Xây dựng ứng dụng web Laravel CRUD

Tạo dự án Laravel

Chạy lệnh sau để tạo dự án Laravel

composer create-project laravel/laravel --prefer-dist laravel-image-upload

Nhận thư mục dự án

cd laravel-image-upload

Xác định cấu hình cơ sở dữ liệu

Chúng tôi có thể sử dụng MAMP hoặc XAMPP để thiết lập máy chủ web cục bộ. Xác định cấu hình cơ sở dữ liệu của bạn trong tệp

cd laravel-image-upload

3

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=root
DB_PASSWORD=

Nếu bạn đang sử dụng máy chủ cục bộ MAMP trong macO; . tập tin env

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Tạo mô hình và di chuyển

Tạo Mô hình và Di chuyển bằng lệnh sau

php artisan make:model Image -m

Đặt mã bên dưới vào tệp cơ sở dữ liệu/di chuyển/dấu thời gian_create_images_table để xác định lược đồ bảng

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->id();
            $table->string('name')->nullable();
            $table->string('image_path')->nullable();
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Đặt mã bên dưới vào ứng dụng/Mô hình/Hình ảnh. tập tin php

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

Tiếp theo, thực hiện lệnh để chạy quá trình di chuyển, quá trình di chuyển có thể được nhìn thấy trong bảng điều khiển PHPMyAdmin của bạn hoặc cơ sở dữ liệu

________số 8_______

Tạo bộ điều khiển tải lên hình ảnh

Chạy lệnh để tạo bộ điều khiển tải lên hình ảnh

php artisan make:controller FileUpload

Truy cập ứng dụng/Http/Bộ điều khiển/FileUpload. php và xác định các phương thức

cd laravel-image-upload

4 và

cd laravel-image-upload

5 để quản lý việc tải lên hình ảnh trong Laravel

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
class FileUpload extends Controller
{
  public function createForm(){
    return view('image-upload');
  }

  public function fileUpload(Request $req){
    $req->validate([
      'imageFile' => 'required',
      'imageFile.*' => 'mimes:jpeg,jpg,png,gif,csv,txt,pdf|max:2048'
    ]);
    if($req->hasfile('imageFile')) {
        foreach($req->file('imageFile') as $file)
        {
            $name = $file->getClientOriginalName();
            $file->move(public_path().'/uploads/', $name);  
            $imgData[] = $name;  
        }
        $fileModal = new Image();
        $fileModal->name = json_encode($imgData);
        $fileModal->image_path = json_encode($imgData);
        
       
        $fileModal->save();
       return back()->with('success', 'File has successfully uploaded!');
    }
  }
}

Hàm createForm() mang from trong dạng xem và phương thức fileUpload() xử lý việc tải lên, lưu trữ và xác thực trong bộ điều khiển tải lên hình ảnh

Bộ điều khiển này cũng được bảo hiểm

• Xác thực khi tải lên hình ảnh
• Hiển thị trạng thái tải lên hình ảnh thông qua cập nhật tin nhắn
• Cho phép các loại tệp cụ thể. e. g. jpeg, jpg, png, gif, csv, txt và pdf
• Áp dụng giới hạn kích thước tệp tối đa 2MB
• Lưu trữ hình ảnh trong bộ lưu trữ laravel và đường dẫn hình ảnh đã tải lên trong cơ sở dữ liệu

Tạo các tuyến đường trong Laravel

Đi đến các tuyến đường/web. php và tạo hai tuyến đường. Một cho biểu mẫu tải lên hình ảnh bằng phương thức get và một tuyến đường khác để tải lên hình ảnh bằng phương thức đăng

cd laravel-image-upload

0

Tạo mẫu lưỡi cắt

Để tải lên nhiều hình ảnh, chúng tôi cần một chế độ xem. Tạo tài nguyên\lượt xem\tải lên hình ảnh. lưỡi. php và thêm đoạn mã sau

cd laravel-image-upload

1

Bắt đầu ứng dụng

Chúng tôi đã tạo chế độ xem, bây giờ chúng ta hãy khởi động ứng dụng bằng lệnh sau

cd laravel-image-upload

2

Kiểm tra các ứng dụng trên liên kết dưới đây

http. //127. 0. 0. 1. 8000/hình ảnh tải lên

Cuối cùng, chúng tôi đã hoàn thành hướng dẫn tải lên tệp và hình ảnh Laravel, tôi hy vọng bạn sẽ thích hướng dẫn này

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Laravel 9 Xác thực Giao thức Internet (IPv6) Hướng dẫn Laravel 9 Nhập bản ghi trong SQL với CSV và Seeder Cách triển khai Xác thực tồn tại trong Laravel 9 Form Laravel 9 Livewire Ví dụ về Hướng dẫn tạo Slug mới Laravel 9 Tạo nhiều Slug duy nhất khi tải trang Hướng dẫn Laravel 9 Bootstrap Tags Ví dụ về hệ thống Hướng dẫn Laravel 9 Tạo

Làm cách nào để chèn nhiều hình ảnh trong Laravel?

Làm cách nào để lưu nhiều hình ảnh trong Laravel 8?

Làm cách nào để lưu trữ nhiều hình ảnh trong Laravel 7?

Làm cách nào để chèn nhiều hình ảnh trong Laravel 9?