I'm using ProductUploader.vue on Laravel Framework to create the form that allow user to see photos of product and be able to select multiple photos at a time. The problem occurred when I'm using 'axios.post' in ProductUploader.vue. It return Error 404 Not Found when return to http://localhost/products instead of http://localhost/travel-with-us/public/products.
Here is my Code in ProductUploader.vue
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card-header font1 font-size2">Add Product</div>
<div class="card-body font3">
<form class="vue-form" @submit.prevent="submit">
<fieldset>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="product_name">Product Name<span style="color: red;">*</span></label>
<input class="col-md-6 form-control" type="text" name="product_name" id="product_name" required v-model="product_name">
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="product_details">Product Details</label>
<input class="col-md-6 form-control" type="text" name="product_details" id="product_details" v-model="product_details">
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="product_price_per_unit">Price Per Unit<span style="color: red;">*</span></label>
<input class="col-md-6 form-control" type="number" name="product_price_per_unit" id="product_price_per_unit" required v-model="product_price_per_unit">
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="product_discount_percentage">Discount Percentage</label>
<input class="col-md-6 form-control" type="number" name="product_discount_percentage" id="product_discount_percentage" v-model="product_discount_percentage">
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="product_photos">Image(s) (If Any)</label>
<input class="col-md-6 form-control" ref="photoUploadInput" type="file" multiple @change="handleFileSelect" accept="image/*" style="display: none;">
<div class="col-md-6">
<div class="flex justify-between items-center mb-6">
<div class="leading-tight">
<div v-if="product_photos.length > 0">
<p>Image Selected : Image(s)</p>
</div>
</div>
<button @click="clickInput" type="button" class="px-6 py-2 font-semibold rounded">Please Select Image(s)</button>
</div>
<div class="row justify-content-center" v-if="product_photos.length">
<div class="col-md-6 p-3" v-for="(photo, index) in product_photos" :key="`thumb-${index}`">
<div class="row">
<img class="object-cover" style="width: 50%;" :src="photo.preview" alt="Selected Image">
<button @click="removePhoto(index)" type="button" class="rounded" style="width: fit-content; height: fit-content; margin-top: auto; margin-bottom: auto;">
<i class="fas fa-minus" style="color: red;"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="tag_id">Tag<span style="color: red;">*</span></label>
<select class="col-md-6 form-control" name="tag_id" id="tag_id" required v-model="tag_id">
<option :selected="true" disabled value="0">Please Select Tag</option>
<option v-for="tag in tag_list" :value="tag.id"></option>
</select>
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="organization_id">Brand<span style="color: red;">*</span></label>
<select class="col-md-6 form-control" name="organization_id" id="organization_id" required v-model="organization_id">
<option :selected="true" disabled value="0">Please Select Brand</option>
<option v-for="organization in organization_list" :value="organization.id"></option>
</select>
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="main_type_id">Product Main Type<span style="color: red;">*</span></label>
<select class="col-md-6 form-control" name="main_type_id" id="main_type_id" required v-model="main_type_id">
<option :selected="true" disabled value="0">Please Select Product Main Type</option>
<option v-for="main_type in product_main_type_list" :value="main_type.id"></option>
</select>
</div>
<div class="form-group row rounded">
<label class="col-md-4 col-form-label text-md-right" for="sub_type_id">Product Sub Type<span style="color: red;">*</span></label>
<select class="col-md-6 form-control" name="sub_type_id" id="sub_type_id" required v-model="sub_type_id">
<option :selected="true" disabled value="0">Please Select Product Sub Type</option>
<option v-for="sub_type in product_sub_type_list" :value="sub_type.id"></option>
</select>
</div>
<div class="form-group row mb-0 justify-content-center">
<button @click="upload" type="button" :disabled="!product_name.length || tag_id == 0 || organization_id == 0 || main_type_id == 0 || sub_type_id == 0" :class="!product_name.length || tag_id == 0 || organization_id == 0 || main_type_id == 0 || sub_type_id == 0 ? 'cursor-not-allowed bg-gray-600 hover:bg-gray-600' : 'bg-indigo-500 hover:bg-indigo-600'" class="px-6 py-2 font-semibold rounded">Add Product</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<script>
import axios from 'axios';
export default {
props: ['tag_list', 'product_main_type_list', 'product_sub_type_list', 'organization_list'],
data() {
return {
product_name: "",
product_details: "",
product_price_per_unit: "",
product_discount_percentage: "",
product_photos: [],
tag_id: 0,
organization_id: 0,
main_type_id: 0,
sub_type_id: 0,
}
},
methods: {
handleFileSelect(e) {
Array.from(e.target.files).forEach(file => {
const reader = new FileReader()
reader.onload = () => {
this.product_photos.push({
preview: reader.result,
file
})
}
reader.readAsDataURL(file)
})
},
clickInput() {
this.$refs.photoUploadInput.click()
},
upload() {
const dt = new DataTransfer()
this.product_photos.forEach(photo => dt.items.add(photo.file))
const fd = new FormData()
fd.append('product_name', document.getElementById('product_name').value);
fd.append('product_details', document.getElementById('product_details').value);
fd.append('product_price_per_unit', document.getElementById('product_price_per_unit').value);
fd.append('tag_id', document.getElementById('tag_id').value);
fd.append('organization_id', document.getElementById('organization_id').value);
fd.append('main_type_id', document.getElementById('main_type_id').value);
fd.append('sub_type_id', document.getElementById('sub_type_id').value);
this.product_photos.forEach((photo, index) => fd.append(`photo-${index}`, photo.file))
console.log(document.getElementById('product_name').value);
console.log(document.getElementById('product_details').value);
console.log(document.getElementById('product_price_per_unit').value);
console.log(document.getElementById('tag_id').value);
console.log(document.getElementById('organization_id').value);
console.log(document.getElementById('main_type_id').value);
console.log(document.getElementById('sub_type_id').value);
console.log(fd);
axios.post('/products', fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
// .then(response => console.log(response))
.then(response => {
// console.log(response);
if(response.status === 200) {
window.location = '/products';
}
})
.catch(err => console.log(err))
},
removePhoto(index) {
this.product_photos.splice(index, 1);
}
}
}
</script>
Here is my route in web.php
Route::resource('products','ProductController');
Any ideas why my code return Error 404? How can I fix this? If you have any ideas or want more information, please leave yours in the comment below. Thank you.
from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3wGUN43
via IFTTT
Aucun commentaire:
Enregistrer un commentaire