Как передать изображение через форму, где фронт это vue js(vuex),a бэк-Laravel?

Question

[Илья Жарчинский]

У меня есть маленькое приложение где можно создавать заметки и каскадно комментировать их. Надо что бы при добавлении комментария можно было ещё и добавить изображение. На просторах интернета я нашел способ как передать картинку через формдату. Но я использую обычную форму в компоненте. Есть ли способ отправить изображение используя обычную форму и паттерн vuex?
Буду рад совету по поводу этой задачи , ну или ссылке на хороший источник. А если есть фрагмент кода для примера то вообще радость будет.

Comments

[Илья Жарчинский]

Это компонент создания и отображения комментариев

<template>
    <div class="row">
        <form @submit.prevent="submit_form()" v-if="!commentSuccess">
            <div class="mb-3">
                <label for="commentSubject" class="form-label">Тема комментария</label>
                <input type="text" class="form-control" id="commentSubject" v-model="subject">
                <div class="alert alert-warning" role="alert" v-if="errorMessage.subject">
                    {{errorMessage.subject[0]}}
                </div>
            </div>
            <div class="mb-3">
                <label for="commentBody" class="form-label">Комментарий</label>
                <textarea rows="3" id="commentBody" class="form-control" v-model="body"></textarea>
                <div class="alert alert-warning" role="alert" v-if="errorMessage.body">
                    {{errorMessage.body[0]}}
                </div>
            </div>
            <div ref="dropzone" class="btn d-block p-5 bg-dark text-center text-light">
                Upload
            </div>
            <button class="btn btn-success" type="submit">Отправить</button>
        </form>
        <div class="alert alert-success" role="alert" v-else>
            Комментарий успешно отправлен!
        </div>
        <div class="toast-container pb-5 mt-5 mx-auto" style="min-width: 100%;" v-for="comment in comments">
            <div class="toast showing" style="min-width: 100%">
                <div class="toast-header">
                    <img src="https://via.placeholder.com/50/5f113b/ffffff/?text=User" class="rounded me-2" alt="">
                    <strong class="me-auto">{{comment.subject}}</strong>
                    <small class="text-muted">{{comment.created_at}}</small>
                </div>
                <div class="toast-body">
                    {{comment.body}}
                </div>
            </div>
        </div>
    </div>

</template>
<code lang="javascript">
<script>
export default {
    data() {
        return {
            subject: '',
            body: ''
        }
    },
    computed: {
        comments() {
            return this.$store.state.article.article.comments;
        },
        commentSuccess() {
            return this.$store.state.article.commentSuccess;
        },
        errorMessage() {
            return this.$store.state.article.errors;
        }
    },
    methods: {
        submit_form() {
            this.$store.dispatch('article/addComment', {
                subject: this.subject,
                body: this.body,
                article_id: this.$store.state.article.article.id,
            })

        },
    },
  }
</script>

</code>

а это хранилище

import axios from "axios";

export  const namespaced = true

export const state = {
    articles:[],
    article: {
        comments: [],
        tags: [],
        statistic: {
            likes: 0,
            views: 0
        }
    },
    slug:'',
    likeIt: true,
    commentSuccess:false,
    errors: []
}

export const actions = {
  getArticleData(context, payload) {
        axios.get('/api/article-json', {params: {'slug':payload}}).then((response) => {
            context.commit('SET_ARTICLE', response.data.data);
        }).catch(() => {
            console.log('Ошибка');
        })
    },
    addComment(context,payload){
        axios.post('/api/article-add-comment', {subject:payload.subject, body:payload.body,article_id:payload.article_id}).then((response)=>{
            context.commit('SET_COMMENT_SUCCESS', !state.commentSuccess);
            context.dispatch('getArticleData', context.rootState.slug)
        }).catch((error)=>{
            if (error.response.status === 422) {
                context.state.errors = error.response.data.errors;
            }
        })
    },
  }
}

export const getters = {
    getArticles(state){
        return state.articles
    },
 
}

export const mutations = {
    SET_STATE(state, payload){
        return state.articles = payload;
    },
    SET_ARTICLE(state, payload) {
        return state.article = payload;
    },
    SET_COMMENT_SUCCESS(state,payload){
        state.commentSuccess = payload;
    }
}

[Ilya Loopashko]

<template>
    <div>
        <div>
            <form @submit.prevent="addImage" enctype="multipart/form-data" class="pt-4">
                <div>
                    <label class="block">
                        <span >Title</span>
                        <input type="text" v-model="image.title" placeholder="">
                    </label>

                    <div>
                        <input ref="fileInput" type="file">
                    </div>
                    <button type="submit" >Create</button>
                </div>
            </form>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            image: {},
            file: '',
            success: '',
        }
    },
    methods: {
        addImage() {
            let existingObj = this;
                const config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                let data = new FormData();
                data.append('file', this.file);
                data.append('title', this.image.title);
                axios.post('/api/images', data, config)
                    .then(response => {
                        this.$router.push({name: 'images', params: {img_upload: 'success'}})
                    })
                    .catch(err => console.log(err))
        },
    }
}
</script>