Mengupload Gambar Pada Laravel dan Menampilkan Pada VueJS

Posted on by

Pada catatan kali ini ditulis tentang Mengupload gambar pada laravel yang akan disimpan kedalam folder storage kemudian mengedit dan menampilkannya pula pada klien VueJS melalui API

Install Paket laravel untuk upload gambar disini saya menggunakan mytuta tool

1
2
3
4
5
"require": {
        "laravel/framework": "5.7.*",
        ...
        "tuta/mytuta": "1.1.*"
    },

1
composer update

1
2
3
4
5
'providers' => array(
        ...
        Tuta\Mytuta\MytutaServiceProvider::class,
        Intervention\Image\ImageServiceProvider::class,
    ),

1
2
3
4
'alias' => array(
        ...
        'Mytuta' => Tuta\Mytuta\Facades\MytutaFacade::class,
    ),

Pada ProductController

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
 
namespace App\Http\Controllers\Admin;
 
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Product;
use Auth, Session, Redirect;
use Mytuta;
 
class ProductController extends Controller
{
    public function index()
    {
        $product = Product::all();
        return view('admin.product.index', compact('product'));
    }
 
    public function create()
    {
        return view('admin.product.create');
    }
 
    public function store(Request $request)
    {
        $product = new Product;
        $product->name = $request->name;
        $product->description = $request->description;
        $product->price = $request->price;
        if($request->hasFile('foto'))
        {
          $upload = Mytuta::uploadImage($request->file('foto'), 'products', 512, null);
          $product->foto = $upload;
        }
        $product->save();
 
        Session::flash('message', 'Product has been saved');
        return Redirect::to('admin/product');
    }
 
    public function show($id)
    {
        //
    }
 
    public function edit($id)
    {
        $product = Product::find($id);
        return view('admin.product.edit', compact('product'));
    }
 
    public function update(Request $request, $id)
    {
        $product = Product::find($id);
        $product->name = $request->name;
        $product->description = $request->description;
        $product->price = $request->price;
        $product->stock = $request->stock;
        if($request->hasFile('foto'))
          {
            $upload = Mytuta::uploadImageEdit($request->file('foto'), 'products', $product->foto, 512, null);
            $product->foto = $upload;
          }
        $product->save();
        Session::flash('message', 'product has been updated');
        return Redirect::to('admin/product');
    }
 
    public function destroy($id)
    {
        $product = Product::find($id);
        $product->delete();
        Session::flash('message', 'Product telah dihapus');
        return Redirect::to('admin/product');
    }
}

dan Pada file Welcome untuk menampilkan gambarnya

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
34
35
36
37
38
39
<template>
<div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
    <div v-for="product in products" :key="product.id" class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <img class="card-img-top" :src="domain + '/img/products/' + product.foto">
        <div class="card-body">
            <h5 class="card-title">{{product.name}}</h5>
          <p class="card-text">{{product.price | currency}}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
              <button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
            </div>
            <small class="text-muted">Stock: {{product.stock}}</small>
          </div>
        </div>
      </div>
    </div>
</div>
</div>
</template>
 
<script>
export default {
    name: 'Welcome',
    created () {
        this.$store.dispatch('products')
    },
    computed: {
      products () {
          return this.$store.getters.products
      },
      domain () {
          return this.$store.state.domainName
        },
    }
}
</script>