@mvd , @hdsavani , I was able to fetch the image and save it to the product table, but in a way that I ignore the image is not fetched and save in the path.
nb: this code works with blade without vuejs, but as soon as i integrate it with vuejs, it doesn't save the image.
Please help me.
my code :
my controller
public function store(Request $request)
{
$request['data'] = json_decode($request['data']);
$produit = new Produits;
if ($request->hasfile('image')) {
$image = $request->file('image');
$filename = $produit->nom . '_' . time() . '.' . $image->getClientOriginalExtension();
if ($produit->image && $produit->image == 'noproductimage.jpg') {
Image::make($image)->resize(500, 500)->save(public_path('/uploads/produits/' . $filename));
} else {
File::delete(public_path('/uploads/produits/' . $produit->image));
Image::make($image)->resize(500, 500)->save(public_path('/uploads/produits/' . $filename));
}
$produit->image = $filename;
}
$produit->nom = $request->get('nom');
$produit->description = $request->get('description');
$produit->prix = $request->get('prix');
$produit->type = $request->get('type');
$produit->categories_id = $request->get('categories_id');
$produit->users_id = $request->get('users_id');
$produit->image = $request->get('image');
$request->file('image')->store('pictures');
$produit->save();
return response()->json(['success' => 'Produit enregistré avec succès']);
}
my vuejs page
<template>
<div class="container-fluid">
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i>
{{ "Créer un Produit" }}
<span class="badge float-right">
<a
v-bind:href="'/listproduits'"
class="btn btn-sm btn-outline-info"
title="Liste des produits"
>
<i class="fas fa-list"></i>
</a>
</span>
</div>
<div class="card-body">
<form @submit.prevent="store" enctype="multipart/form-data">
<div class="form-group row">
<label></label>
<input
class="form-control"
type="text"
placeholder="Nom du produit"
v-model="nom"
required
autofocus
/>
</div>
<div class="form-group row">
<label></label>
<textarea
class="form-control"
id="textarea-input"
v-model="description"
rows="6"
placeholder="Description du Produit"
required
></textarea>
</div>
<div class="input-group row">
<label></label>
<input
type="text"
class="form-control"
v-model="prix"
placeholder="Prix du produit"
/>
<div class="input-group-append">
<span class="input-group-text">FCFA</span>
</div>
</div>
<div class="form-group row">
<label>Categories:</label>
<select
class="form-control"
v-model="categories_id"
@change="getCategories()"
>
<option disabled value="">
Sélectionner une catégorie
</option>
<option
v-for="categorie in categories"
v-bind:key="categorie.id"
v-bind:value="categorie.id"
>
{{ categorie.nom }}
</option>
</select>
</div>
<div class="form-group row">
<div class="col-md-9">
<input
id="file-input"
placeholder="Image du produit"
type="file"
name="image"
@change="onFileChange"
v-on:change="image"
/>
</div>
</div>
<div class="form-group row">
<label></label>
<input
class="form-control"
type="text"
placeholder="Type du produit"
v-model="type"
required
autofocus
/>
</div>
<div class="form-group row">
<label></label>
<input
class="form-control"
type="hidden"
placeholder=""
v-model="users_id"
required
autofocus
/>
</div>
<button
class="btn btn-block pull-right btn btn-sm btn-outline-info"
type="submit"
>
{{ "Valider" }}
</button>
<a href="" class="btn btn-block btn btn-sm btn-info">
{{ "Retourner" }}
</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
categories_id: "",
categories: [],
nom: "",
description: "",
prix: "",
type: "",
image: "",
users_id: document
.querySelector("meta[name='users_id']")
.getAttribute("content"),
};
},
methods: {
getCategories: function () {
axios.get("/api/get_categories").then(
function (response) {
this.categories = response.data;
}.bind(this)
);
},
onFileChange(e) {
//console.log(e.target.files[0]);
this.image = e.target.files[0].name;
this.file = e.target.files[0];
},
store() {
axios
.post("/api/createproduit", {
// /api/createproduit = au chemin depuis route -> api.php
nom: this.nom,
description: this.description,
prix: this.prix,
type: this.type,
image: this.image,
categories_id: this.categories_id,
users_id: document
.querySelector("meta[name='users_id']")
.getAttribute("content"),
headers: {
"content-type": "multipart/form-data",
"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
.content,
},
})
.then((response) => {
this.produits = response.data.data;
this.loading = false;
this.form.reset();
window.location = response.data.redirect;
})
.then(location.reload())
.catch(function (error) {
console.log(error);
});
},
},
mounted() {
this.getCategories();
},
};
</script>
<style></style>
Thank you in advance for your help.
