Laravel 9 File Unggah: Cara Mengunggah File di Laravel – Codewithaden

Kita gunakan Laravel sebagai backend untuk tutorial ini dan Kerangka Bootstrap CSS untuk desain frontend. Mengunggah file di Laravel sangat mudah. Pertama, kita perlu membuat file tampilan di mana pengguna dapat memilih file yang akan diunggah dan pengontrol di mana file yang diunggah akan diproses.

Unggahan file Laravel

Untuk mengunggah file di Laravel, gunakan Penyimpanan :: Disk (‘Lokal’)-> putfileas (‘nama file’) fungsi. Laravel Flysystem Integration memberikan driver sederhana untuk bekerja dengan sistem file lokal, SFTP, dan Amazon S3. Sangat mudah untuk beralih antara opsi penyimpanan ini antara mesin pengembangan lokal dan server produksi karena API tetap sama untuk setiap sistem.

Terlepas dari backend, kami akan menggunakan Perpustakaan Dropzone Javascript di frontend untuk menjatuhkan file dalam formulir untuk mengunggahnya. Tapi, pertama, mari kita lihat panduan langkah demi langkah untuk mengunggah file di Laravel.

Langkah 1: Pasang Laravel

Ketik perintah berikut.

laravel new fileupload 

Masuk ke folder proyek dan pasang dependensi frontend.

npm install 

Mengatur database di dalam .env mengajukan.

Langkah selanjutnya adalah membuat auth menggunakan perintah berikut.

php artisan make:auth 

Sekarang, migrasi database menggunakan perintah berikut.

php artisan migrate 

Langkah 2: Buat tabel file.

Oke, sekarang kita perlu membuat a Mengajukan model dan migrasi menggunakan perintah berikut.

php artisan make:model File -m 

Tentukan skema di dalam file migrasi yang baru dibuat.

// create_files_table

increments('id');
            $table->integer('user_id')->unsigned()->index();
            $table->string('title');
            $table->text('overview');
            $table->decimal('price', 6, 2);
            $table->timestamps();
            $table->softDeletes();
            $table->foreign('user_id')
                  ->references('id')
                  ->on('users')
                  ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('files');
    }
}
 

Sekarang, bermigrasi menggunakan perintah berikut.

php artisan migrate 

Langkah selanjutnya adalah membangun hubungan antara model pengguna dan file.

Dalam File.php, Tulis kode berikut.

belongsTo(User::class);
    }
}
 

Jadi, di sini kami telah menyatakan bahwa setiap file adalah milik tertentu Pengguna

Sekarang, tentukan hubungan di dalam User.php model.

hasMany(File::class);
    }
}
 

Langkah 3: Buat tampilan dan rute untuk mengunggah file.

Membuat FileController menggunakan perintah berikut.

php artisan make:controller FileController 

Di dalam home.blade.php File, tulis kode berikut di dalam.

@extends('layouts.app')

@section('content')
File Upload
@csrf
@if ($errors->has('title')) {{ $errors->first('title') }} @endif
@if ($errors->has('overview')) {{ $errors->first('overview') }} @endif
@if ($errors->has('price')) {{ $errors->first('price') }} @endif
@endsection

Anda juga perlu menentukan rute pos di dalamnya rute >> web.php mengajukan.

name('home');

Route::post('file/upload', 'FileController@store')->name('file.upload'); 

Sekarang, simpan file dan daftarkan pengguna, dan Anda dapat melihat halaman ini.

Laravel

Oke, sekarang, Anda dapat melihat bahwa kami belum menggunakan bidang formulir file apa pun dari formulir. Kami akan melakukannya dalam satu menit, tetapi ini adalah pengaturan bentuk utama kami.

Langkah 4: Menyimpan data formulir.

Sekarang, kita perlu menulis toko Fungsi untuk menyimpan data dalam database.

validate([
        'title' => 'required:max:255',
        'overview' => 'required',
        'price' => 'required|numeric'
      ]);

      auth()->user()->files()->create([
        'title' => $request->get('title'),
        'overview' => $request->get('overview'),
        'price' => $request->get('price')
      ]);

      return back()->with('message', 'Your file is submitted Successfully');
    }
}
 

Kami juga menyertakan validasi untuk bidang formulir kami.

Juga, kita perlu memperbarui tampilan kita untuk melihat pesan flash.

// home.blade.php 

@if(session()->get('message'))
    
{{ session()->get('message') }}
@endif

Langkah 5: Mengatur hubungan unggahan file.

Sekarang, kami akan membuat yang lain model dan migrasi untuk file yang mengunggah.

Ketik perintah berikut untuk menghasilkan model dan migrasi.

php artisan make:model Upload -m 

Tulis skema berikut di dalamnya create_uploads_table.php mengajukan.

// create_uploads_table.php

public function up()
{
        Schema::create('uploads', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id')->unsigned()->index();
            $table->string('filename');
            $table->softDeletes();
            $table->timestamps();

            $table->foreign('user_id')
                  ->references('id')
                  ->on('users')
                  ->onDelete('cascade');
        });
} 

Migrasi database menggunakan perintah berikut.

php artisan migrate 

Oke, sekarang kita perlu mengatur hubungan.

Di dalam Unggah.php file, tulis kode berikut.

belongsTo(User::class);
    }
}
 

Di Sini, Mengunggah adalah milik Mengajukan dan Pengguna.

Jadi, sekarang tulis metode hubungan berikut di dalam User.php model.

// User.php

public function files()
{
   return $this->hasMany(File::class);
}

public function uploads()
{
   return $this->hasMany(Upload::class);
} 

Akhirnya, tulis hubungan berikut di dalam Model File.php.

// File.php

public function user()
{
   return $this->belongsTo(User::class);
} 

Langkah 6: Siapkan dropzone.

Instal Dropzone Perpustakaan menggunakan perintah berikut.

npm install dropzone --save 

Sekarang, sertakan perpustakaan ini di dalam Sumber Daya >> Aset >> JS >> bootstrap.js mengajukan. Kita perlu menambahkan kode di dalam file itu.

// bootstrap.js

/**
 * Dropzone
 */

 window.Dropzone = require('dropzone');
 Dropzone.autoDiscover = false; 

Oke, sekarang kita perlu mengimpor file CSS dropzone. Jadi di dalam Sumber Daya >> Aset >> Sass >> App.scss file, tambahkan kode berikut.

// app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Dropzone
@import '~dropzone/dist/min/dropzone.min.css';

.dropzone {
  margin-bottom: 20px;
  min-height: auto;
}

 

Sekarang, kompilasi file menggunakan perintah berikut.

npm run dev 

Oke, sekarang kita perlu menggunakan Dropzone perpustakaan di dalam home.blade.php mengajukan.

@extends('layouts.app')

@section('content')
@if(session()->get('message'))
{{ session()->get('message') }}
@endif
File Upload
@csrf
@if ($errors->has('title')) {{ $errors->first('title') }} @endif
@if ($errors->has('overview')) {{ $errors->first('overview') }} @endif
@if ($errors->has('price')) {{ $errors->first('price') }} @endif
@endsection @section('scripts') @endsection

Juga, tentukan POS Rute untuk mengunggah file.

// web.php

Route::post('upload', 'FileController@upload')->name('upload');
 

Buat fungsi unggah di dalam Filecontroller.php mengajukan.

// FileController.php

public function upload()
{
   return 'x';
} 

Simpan file dan pergi ke http: //fileupload.test/home.

Laravel

Langkah 7: Menangani Proses Unggah File.

Hal pertama yang perlu kita lakukan adalah menambahkan header saat mengirim POS permintaan ke server.

// home.blade.php

@section('scripts')
  
@endsection 

Sekarang, kode terakhir untuk Filecontroller.php File terlihat seperti di bawah ini.

validate([
        'title' => 'required:max:255',
        'overview' => 'required',
        'price' => 'required|numeric'
      ]);

      auth()->user()->files()->create([
        'title' => $request->get('title'),
        'overview' => $request->get('overview'),
        'price' => $request->get('price')
      ]);

      return back()->with('message', 'Your file is submitted Successfully');
    }

    public function upload(Request $request)
    {
      $uploadedFile = $request->file('file');
      $filename = time().$uploadedFile->getClientOriginalName();

      Storage::disk('local')->putFileAs(
        'files/'.$filename,
        $uploadedFile,
        $filename
      );

      $upload = new Upload;
      $upload->filename = $filename;

      $upload->user()->associate(auth()->user());

      $upload->save();

      return response()->json([
        'id' => $upload->id
      ]);
    }
}
 

Laravel

Sekarang, Anda dapat melihat file yang diunggah di dalam Penyimpanan >> aplikasi >> file map.

Itu untuk tutorial ini.

Posting yang disarankan

Laravel Dropzone Expload

Laravel Avatar Image Unggah

Laravel Cloud File Unggah

React and Laravel File Unggah

Vue dan Laravel File Unggah

Laravel beberapa file unggah

Laravel beberapa gambar mengunggah

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *