Upload File from Vuejs 3 to Laravel 9 API
2 years ago
admin
Vuejs
Today we are going to see how we can upload a file from Vue js 3 to Laravel 9 API, it seems hard to deal with but as you will see it is easy to do.
Get user data from the Vue js 3 front end
In the front end, we use the form data interface, all we have to do is to append the values and send them to the Laravel API using Axios.
<template>
<div class="row my-3">
<div class="col-md-8 mx-auto my-5">
<form @submit.prevent="addArticle">
<div class="form-group mb-2">
<input
type="text"
v-model="data.title"
placeholder="Title"
class="form-control"
:required="true">
</div>
<div class="form-group mb-2">
<input
type="file"
name="photo"
@change="getImage"
:required="true">
</div>
<div class="form-group mb-2">
<textarea
rows="5" cols="30"
v-model="data.body"
placeholder="Body"
class="form-control"
:required="true"
></textarea>
</div>
<div class="form-group mb-2">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
title: '',
body: '',
image: null,
});
const getImage = (event) => {
data.image = event.target.files[0];
};
const addArticle = () => {
try {
const formData = new FormData();
formData.append('image', data.image);
formData.append('title', data.title);
formData.append('body', data.body);
await axios.post(`/api/articles`, formData);
console.log('Article added')
} catch (error) {
console.log(error);
}
}
</script>
<style>
</style>
Store data in the database using Laravel 9
Next, we get and store data in the ArticleController.
<?php
namespace App\Http\Controllers;
use App\Models\Article;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
$data = $request->all();
$file = $request->file('image');
$image_name = time().'_'.'image'.'_'.$file->getClientOriginalName();
$file->move('uploads/articles', $image_name);
$data['image'] = 'uploads/articles/'.$image_name;
$data['slug'] = Str::slug($request->title);
$article = Article::create($data);
return response()->json($article);
}
}