Laravel vue js image crud code example with base64
//controller code
<?php
namespace App\Http\Controllers;
use App\Item;
use File;
use Illuminate\Http\Request;
class ItemController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$q = $request->get('q');
$items = Item::where('name', 'LIKE', '%'.$q.'%')
->orWhere('price', 'LIKE', '%'.$q.'%')
->orWhere('description', 'LIKE', '%'.$q.'%')
->orderBy('name')->paginate(10);
return response()->json($items);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'price' => 'required',
// 'image' => 'mimes:jpg,jpeg,png|max:10240',
'description' => 'required'
]);
$existFile = '';
if ($request->image) {
$exploded = explode(',', $request->image);
$decoded = base64_decode($exploded[1]);
if (str_contains($exploded[0], 'jpeg')) {
$extension = 'jpg';
} else {
$extension = 'png';
}
$fileName = str_random().'.'.$extension;
$path = public_path().'/image/'.$fileName;
file_put_contents($path, $decoded);
$existFile .= $fileName;
}
$item = new Item;
$item->create($request->except('image') + [
'image' => $existFile
]);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Item $item
* @return \Illuminate\Http\Response
*/
public function show(Item $item)
{
return response()->json($item);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Item $item
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Item $item)
{
$this->validate($request, [
'name' => 'required',
'price' => 'required',
'description' => 'required'
]);
$exploded = explode(',', $request->image);
if (array_key_exists(1, $exploded)) {
// Komen Bagian ini jika file sebelumnya tidak mau di hapus
if ($item->image) {
$itemImage = public_path("image/{$item->image}"); // get previous image from folder
if (File::exists($itemImage)) { // unlink or remove previous image from folder
unlink($itemImage);
}
}
$exploded = explode(',', $request->image);
$decoded = base64_decode($exploded[1]);
if (str_contains($exploded[0], 'jpeg')) {
$extension = 'jpg';
} else {
$extension = 'png';
}
$fileName = str_random().'.'.$extension;
$path = public_path().'/image/'.$fileName;
file_put_contents($path, $decoded);
$item->image = $fileName;
}
$item->name = $request->name;
$item->price = $request->price;
$item->save();
// $item->name = $request->name;
// $item->update($request->except('image') + [
// 'image' => $fileName
// ]);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Item $item
* @return \Illuminate\Http\Response
*/
public function destroy(Item $item)
{
$item->delete();
}
}
//item component code
<template>
<div class="row">
<div class="col-lg-8 m-auto">
<card :title="'Create Item'">
<form @submit.prevent="create" @keydown="form.onKeydown($event)">
<!-- Name -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">Name</label>
<div class="col-md-7">
<input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" type="text" name="name">
<has-error :form="form" field="name"/>
</div>
</div>
<!-- Price -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">Price</label>
<div class="col-md-7">
<input v-model="form.price" :class="{ 'is-invalid': form.errors.has('price') }" class="form-control" type="text" name="price">
<has-error :form="form" field="price"/>
</div>
</div>
<!-- Image -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">Image</label>
<div class="col-md-7">
<input type="file" name="image" :class="{ 'is-invalid': form.errors.has('image') }" class="form-control" @change="selectFile">
<has-error :form="form" field="image"/>
</div>
</div>
<!-- Description -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">Description</label>
<div class="col-md-7">
<textarea
:class="{ 'is-invalid': form.errors.has('description') }"
class="form-control"
v-model="form.description">
</textarea>
<has-error :form="form" field="description"/>
</div>
</div>
<div class="form-group row">
<div class="col-md-7 offset-md-3 d-flex">
<!-- Submit Button -->
<v-button :loading="form.busy">
Create
</v-button>
</div>
</div>
</form>
</card>
</div>
</div>
</template>
<script>
import Form from 'vform'
export default {
name: 'Edit',
middleware: 'auth',
data: () => ({
form: new Form({
name: '',
price: '',
image: '',
description: ''
})
}),
methods: {
selectFile(e) {
var fileReader = new FileReader()
fileReader.readAsDataURL(e.target.files[0])
fileReader.onload = (e) => {
this.form.image = e.target.result
}
},
async create() {
const data = await this.form.post('/api/items');
this.$router.push({ name: 'items' })
}
}
}
</script>
No comments