I have an action method in my vuex store, which has two parameters with names "context", "payload". Payload has data and that vuex action method by itself sees and with console.log() prints in console the data, which comes with that payload parameter, but when I try to send that value with axios to controller, the controller gets empty data. The most terrible thing. If instead of "payload.payloadDataName" I give any other value in that action method, no matter where I give it, it works well, but payload value it sees only out of axios braces. I don't know what the ... sorry, in my brain only rude words, cause I spent more than 8 hours to solve this and no positive result yet. Can you help me to solve this problem?
Here's my code
users.js (vuex store module)
actions: {
async uploadProfileAvatar(context, payload){
try {
const avatar = payload.avatar; //if here i write "const avatar = 8" or "{data:8}" it will work fine
const response = await axios.post('/avatar', {data: avatar}); //if here instead of "{data:avatar}" I'll write "{data:8}" or "{data:{help:8}" it will work fine too
console.log("payload.avatar = ");
console.log(payload.avatar); //it's strange, but in this line, it works, so I can't say payload parameter's data is not coming
return response.data;
} catch (error) {
}
},
...
Profile.vue
<template>
<div>
<div class="d-flex justify-content-center">
<img v-if="src!==''" :src="src" alt="something" width="250px">
</div>
<div class="d-flex justify-content-center">
<form enctype="multipart/form-data">
<input type="file" v-on:change='formFile' name="img">
<input type="button" v-on:click="uploadImage()" value="upload">
</form>
</div>
<div>
Wall
<button type="button">Hello</button>
</div>
</div>
</template>
<script>
export default {
name: "Profile",
data: () => {
return {
src: '',
file: null
}
},
mounted() {
this.getImage();
},
methods: {
getImage() {
this.$store.dispatch('users/loadProfileAvatar').then((res) => {
console.log('/storage/avatars/avatar-of-user' + this.$userId + '/' + res)
this.src = '/storage/avatars/avatar-of-user' + this.$userId + '/' + res;
}).catch((error) => {
console.log(error);
});
},
formFile(e){
this.file = e.target.files[0];
},
uploadImage() {
console.log(this.file);
this.$store.dispatch('users/uploadProfileAvatar', {
avatar:this.file //this is the payload's data, which I need.
}).then((res) => {
console.log(res);
}).catch((error) => {
console.log(error);
});
}
}
}
</script>
IMPORTATNT! My aim is to get the vue component's template's form input file's data and send it to vuex store module's action method, and from there send it to needed controller by axios.
Updated
async uploadProfileAvatar(context, payload){
try {
const avatar = payload.avatar; //if here i write "const avatar = 8" or "{data:8}" it will work fine
const response = await axios.post('/avatar', {data: avatar}); //if here instead of "{data:avatar}" I'll write "{data:8}" or "{data:{help:8}" it will work fine too
console.log("payload.avatar = ");
console.log(payload.avatar); //it's strange, but in this line, it works, so I can't say payload parameter's data is not coming
return response.data;
} catch (error) {
}
},
changed to
async uploadProfileAvatar(context, payload){
try {
const avatar = payload.avatar;
let data = new FormData();
data.append('file',avatar);
const response = await axios.post('/avatar', data);
console.log("payload.avatar = ");
console.log(payload.avatar);
return response.data;
} catch (error) {
}
},
but it not works... interesting, what I don't see?
Updated
Controller's method
public function store(Request $request)
{
$file = $request->all();
return response()->json([
'file' => $file,
]);
}
