When attempting to create a new entry in strapi by sending a post request in vue.js, I encountered the following error:
message:
Missing "data" payload in the request
P.S: I also need to be able to upload files. I have read that using formData is necessary for this, but I am unsure how to go about doing that.
Here is the code snippet:
<script setup>
import { ref } from 'vue';
// Define refs for form fields
const fullName = ref('');
const emailAddress = ref('');
const phoneNumber = ref('');
const uploadPhoto = ref(null);
const location = ref('');
const merchantId = ref('');
const acuityLink = ref('');
const acuityId = ref('');
const acuityKey = ref('');
// Function to handle file input change
const handleFileChange = (event) => {
uploadPhoto.value = event.target.files[0];
};
const submitForm = () => {
// Create a FormData object to send the form data
// const formData = new FormData();
// formData.append('fullName', fullName.value);
// formData.append('emailAddress', emailAddress.value);
// formData.append('phoneNumber', phoneNumber.value);
// formData.append('uploadPhoto', uploadPhoto.value);
// formData.append('location', location.value);
// formData.append('merchantId', merchantId.value);
// formData.append('actuityLink', actuityLink.value);
// formData.append('acuityId', acuityId.value);
// formData.append('acuityKey', acuityKey.value);
// console.log(fullName.value, uploadPhoto.value)
const strapi = {
StoreName: fullName.value,
StoreLocation: location.value,
merchant_id: merchantId.value,
ActuityLink: acuityLink.value,
PhoneNumber: phoneNumber.value,
ActuityKey: acuityKey.value,
ActuityID: acuityId.value
}
fetch('http://localhost:1337/api/barbers-stores', {
method: 'POST',
header: {
Authorization: 'Bearer ...',
"Content-Type": 'application/json'
},
body: JSON.stringify({data: strapi})
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.log(error))
};
</script>
<template>
<section class="container">
<header>Registration Form</header>
<form action="#" class="form">
<div class="input-box">
<label>Full Name</label>
<input type="text" placeholder="Enter full name" v-model="fullName" required />
</div>
<div class="input-box">
<label>Email Address</label>
<input type="text" placeholder="Enter email address" v-model="emailAddress" required />
</div>
<div class="input-box">
<label>Phone Number</label>
<input type="number" placeholder="Enter phone number" v-model="phoneNumber" required />
</div>
<!-- New Fields -->
<div class="input-box">
<label>Upload Photo</label>
<input type="file" accept="image/*" @change="handleFileChange" required />
</div>
<div class="input-box">
<label>Location</label>
<input type="text" placeholder="Enter location" v-model="location" required />
</div>
<div class="input-box">
<label>Merchant ID</label>
<input type="text" placeholder="Enter Merchant ID" v-model="merchantId" required />
</div>
<div class="input-box">
<label>Acuity Username</label>
<input type="text" placeholder="Enter Acuity Username" v-model="actuityLink" required />
</div>
<div class="input-box">
<label>Acuity ID</label>
<input type="text" placeholder="Enter Acuity ID" v-model="actuityId" required />
</div>
<div class="input-box">
<label>Acuity Key</label>
<input type="text" placeholder="Enter Acuity Key" v-model="actuityId" required />
</div>
<!-- End of New Fields -->
<button @click.prevent="submitForm">Submit</button>
</form>
</section>
</template>