In this tutorial you will learn about the Laravel 8 Vue JS File/Image Upload Example Tutorial and its application with practical example.
In this Laravel 8 Vue JS Image file Upload Example Tutorial, we will learn how to upload a image file in Laravel 8 Vue JS application. In this tutorial you will learn to how to upload a image file in Laravel 8 Vue JS application. In this article I’ll guide through how to upload files with Vue js using Axios post request In Laravel 8 Vue JS application. In this tutorial, we will be creating a simple form to send form data (files, images, input fields etc) with Vue js using Axios to send POST request in laravel.
Laravel 8 Laravel 8 Vue JS File/Image Upload Example Tutorial
In this step by step tutorial I will demonstrate you how to upload image files with Vue js using In Laravel 8 Vue JS application. Please follow the instruction given below:
Install Laravel App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project laravel/laravel laravel-vue-file-upload-example --prefer-dist |
Connecting to Database
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=databse DB_USERNAME=root DB_PASSWORD= |
Model and Migration
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan make:model FileUpload -m |
Define code in database/migrations/create_file_uploads_table.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateFileUploadsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('file_uploads', function (Blueprint $table) { $table->id(); $table->string('name')->nullable(); $table->string('path')->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('file_uploads'); } } |
Add code as given below in app/Models/FileUpload.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class FileUpload extends Model { use HasFactory; protected $fillable = [ 'name', 'path' ]; } |
Now, run the migration to create database table using following artisan command:
