Я пытался загрузить изображение в laravel проекте, используя vuejs и vuex, но не смог. Ниже компонент
<div class="form-group">
<label class="col-sm-2 control-label">Profile Image</label>
<div class="col-sm-10">
<button class="btn btn-primary" @click="chooseFile()">Choose Image</button>
<input type="file" class="form-control" ref="fileInput"v-on:change="uploadImage($event)" style="display:none" name="image">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<img :src="this.imageUrl" height="150">
</div>
</div>
<script>
export default {
name: "profile.vue",
data(){
return{
previewImage:null,
image:null,
imageUrl:''
}
},
methods:{
updateProfile(){
const image={
image:this.image
}
this.$store.dispatch('updateProfile',{image});
},
uploadImage(event){
const file=event.target.files[0];
console.log(file);
const fileReader=new FileReader();
fileReader.addEventListener('load',()=>{
this.imageUrl=fileReader.result
});
fileReader.readAsDataURL(file);
this.image=file;
},
chooseFile(){
this.$refs.fileInput.click()
}
}
}
</script>
ниже - действие. js из магазина
export const updateProfile=({commit,state},payload)=>{
const currentUser=state.signIn.currentuser.data;
const userImage=payload.image;
axios.post(`/update-profile`,{currentUser,userImage}).then(response=>{
// state.signIn.currentuser=response.auth;
const msg=response.data.msg;
commit('success',{msg});
}).catch((e)=>{
const error=e.response.data;
commit('failed',{error});
});
};
в хранилище, так как я передал два параметра, то есть currentUser, userImage, но я получил пустой userImage в контроллере. Если есть другой способ загрузить изображение, пожалуйста, прокомментируйте.