Laravel、Vueにて画像アップロード更新

前提

Laravel、Vueにてプロフィール更新ページを作成しております。
新規作成は成功し、プロフィールをDBに保存する機能は完成しております。

登録したプロフィールを更新したいのですが、画像を選択せず更新をしますと更新機能が上手く機能するのですが、プロフィール画像を選択後、更新をしますとなぜかバリデーションのrules（required）に引っかかりエラーとなってしまいます。
※ユーザー画像選択すると、ユーザー名など全て入力していますが「必ず指定してください。」と未入力エラーが発生致します。rulesでは「required」を設定しております。

新規登録では、エラーは発生せず上手く登録されます。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

プロフィールの更新にて画像選択してもバリデーションのエラーが発生しないようにしたいです。

発生している問題・エラーメッセージ

ユーザーの画像を選択すると、格input項目でのバリデーションエラー

該当のソースコード

// =======================================
//更新用ファイル
//Edit.vue
// =======================================
<script setup>
import AdminAuthenticatedLayout from '@/Layouts/AdminAuthenticatedLayout.vue';
import { Inertia } from '@inertiajs/inertia';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { reactive, toRef, onMounted } from 'vue';
import FlashMessage from "@/Components/FlashMessage.vue"

const props = defineProps({
    'user': Array,
    'plans': Array,
    'errors': Object
});

const form = reactive({
    id: props.user.id,
    user_image: null,
    user_name: props.user.user_name,
    plan: props.user.plan,
    address: props.user.address,
    tel: props.user.tel,
    email: props.user.email,
    remarks: props.user.remarks,
});

onMounted(() => {
    const planNum = props.user.plan;
    document.getElementById('plan').options[planNum].selected = true;
})

const userData = id => {
    Inertia.put(route('admin.user.update', {user: id}), form);
}

const onImageUpLoad = (e) => {
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);
    const deleteTarget = document.getElementById('c-user-img__image');
    const addTarget = document.querySelector('.c-user-img label');
    const addHtml = `<img src="${blobUrl}" class="u-fit" id="c-user-img__image">`;
    form.user_image = file

    deleteTarget.remove();
    addTarget.insertAdjacentHTML('afterbegin', addHtml);
}

</script>

<template>
    <Head title="ユーザー登録フォーム" />

    <AdminAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">ユーザー</h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <h2 class="my-5 font-bold text-xl">ユーザー登録フォーム</h2>
                <div class="p-content py-20">
                    <div class="mb-10">
                        <FlashMessage />
                    </div>
                    <form @submit.prevent="userData(form.id)">
                        <div class="p-user-show">
                            <div>
                                <div class="c-user-img">
                                    <label class="cursor-pointer">
                                        <img :src="'/storage/images/users/' + user.user_image" class="u-fit" id="c-user-img__image">
                                        <input type="file" id="user_image" name="user_image" accept="image/png,image/jpeg,image/jpg" class="p-form__camera" v-on:change="onImageUpLoad">
                                    </label>
                                    <div class="text-red-600" v-if="errors.user_image">{{ errors.user_image }}</div>
                                </div>
                            </div>
                            <div class="p-user-show__data">
                                <dl class="p-user-show__data__def p-user-show__data__def--form items-center">
                                    <dt class="p-user-show__data__def-tit p-user-show__data__def-tit--form">ユーザー名</dt>
                                    <dd class="p-user-show__data__def-data p-user-show__data__def-data--form">
                                        <input type="text" id="user_name" name="user_name" v-model="form.user_name" class="w-full bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 px-3 leading-8 transition-colors duration-200 ease-in-out" required>
                                        <div class="text-red-600" v-if="errors.user_name">{{ errors.user_name }}</div>
                                    </dd>
                                </dl>
                                <dl class="p-user-show__data__def p-user-show__data__def--form items-center">
                                    <dt class="p-user-show__data__def-tit p-user-show__data__def-tit--form">プラン</dt>
                                    <dd class="p-user-show__data__def-data p-user-show__data__def-data--form">
                                        <select v-if="plans" id="plan" name="plan" v-model="form.plan" class="bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 px-3 leading-8 transition-colors duration-200 ease-in-out" required>
                                            <option value="">選択する</option>
                                            <option v-for="plan in plans" :key="plan.id" :value="plan.id">{{plan.name}}</option>
                                        </select>
                                        <div class="text-red-600" v-if="errors.plan">{{ errors.plan }}</div>
                                    </dd>
                                </dl>
                                <dl class="p-user-show__data__def p-user-show__data__def--form items-center">
                                    <dt class="p-user-show__data__def-tit p-user-show__data__def-tit--form">住所</dt>
                                    <dd class="p-user-show__data__def-data p-user-show__data__def-data--form">
                                        <input type="text" id="address" name="address" v-model="form.address" class="w-full bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 px-3 leading-8 transition-colors duration-200 ease-in-out" required>
                                        <div class="text-red-600" v-if="errors.address">{{ errors.address }}</div>
                                    </dd>
                                </dl>
                                <dl class="p-user-show__data__def p-user-show__data__def--form items-center">
                                    <dt class="p-user-show__data__def-tit p-user-show__data__def-tit--form">TEL</dt>
                                    <dd class="p-user-show__data__def-data p-user-show__data__def-data--form">
                                        <input type="tel" id="tel" name="tel" v-model="form.tel" class="w-full bg-opacity-50 rounded border focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 px-3 leading-8 transition-colors duration-200 ease-in-out" required>
                                        <div class="text-red-600" v-if="errors.tel">{{ errors.tel }}</div>
                                    </dd>
                                </dl>
                                <dl class="p-user-show__data__def p-user-show__data__def--form items-center">
                                    <dt class="p-user-show__data__def-tit p-user-show__data__def-tit--form">メールアドレス</dt>
                                    <dd class="p-user-show__data__def-data p-user-show__data__def-data--form">
                                        <input type="email" id="email" name="email" v-model="form.email" class="w-full bg-opacity-50 rounded border focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 px-3 leading-8 transition-colors duration-200 ease-in-out" required>
                                        <div class="text-red-600" v-if="errors.email">{{ errors.email }}</div>
                                    </dd>
                                </dl>
                                <dl class="p-user-show__data__def p-user-show__data__def--form">
                                    <dt class="p-user-show__data__def-tit p-user-show__data__def-tit--form">備考</dt>
                                    <dd class="p-user-show__data__def-data p-user-show__data__def-data--form">
                                        <textarea name="remarks" id="remarks" v-model="form.remarks" cols="30" rows="10" class="border border-gray-300"></textarea>
                                        <div class="text-red-600" v-if="errors.remarks">{{ errors.remarks }}</div>
                                    </dd>
                                </dl>
                                <!-- <button type="submit" :onclick="formSubmit" class="c-button c-button--brown m-auto u-mt60">登録する</button> -->
                                <button class="c-button c-button--brown m-auto u-mt60">編集する</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <template #footer />
    </AdminAuthenticatedLayout>
</template>

// =======================================
//バリデーションファイル内容
//UpdateUserInfoRequest.php
// =======================================

            'user_image' => 'nullable|image|mimes:jpg,jpeg,png|max:2048',
            'user_name' => ['required', 'string', 'max:255'],
            'plan' => ['required', 'integer'],
            'address' => ['required', 'string'],
            'tel' => ['required', 'string'],
            'email' => 'required|string|email|max:255',
            'remarks' => ['string'],

試したこと

console.logなどで値を確認しながら作業しましたが、さっぱり分からないため皆様のお力をお借りしたいと思いました。

補足情報（FW/ツールのバージョンなど）

以下画像のように、ユーザーの画像を選択後編集ボタンを押すと、未入力ではないのですが、「必ず指定してください。」とエラーが発生致します。

行動規範の内容に同意します

回答1件

ベストアンサー

onImageUpLoad内がVueの使い方ではないので途中でformが壊れてるのでは。
reactiveだと意図せず壊れやすい。

Inertia vueならuseFormの使い方を見てから
https://inertiajs.com/forms
Jetstreamでのプロフィール画像の変更を参考にすればいい。
https://github.com/laravel/jetstream/blob/2.x/stubs/inertia/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
これを見てもvue内でdocument.getElementByIdは出て来ない。

投稿2023/01/09 09:59

kawax

総合スコア10377

o0039

2023/01/09 13:48

ご教示ありがとうございます！ Jetstreamでのプロフィール画像の変更を参考させていただきました。 reactiveをuseFormに変更し「_method: 'PUT',」を追記。 Inertia.put → form.postに変更したところ上手くいきました。他onImageUpLoadなど変更いたしました。 <script setup> import AdminAuthenticatedLayout from '@/Layouts/AdminAuthenticatedLayout.vue'; import { Head, useForm } from '@inertiajs/inertia-vue3'; import { ref, onMounted } from 'vue'; import FlashMessage from "@/Components/FlashMessage.vue" const props = defineProps({ 'user': Object, 'plans': Array, 'errors': Object }); const form = useForm({ _method: 'PUT', id: props.user.id, user_image: null, user_name: props.user.user_name, plan: props.user.plan, address: props.user.address, tel: props.user.tel, email: props.user.email, remarks: props.user.remarks, }); const photoInput = ref(null); const photoImage = ref(null); onMounted(() => { const planNum = props.user.plan; document.getElementById('plan').options[planNum].selected = true; }) const userData = id => { if (photoInput.value) { form.user_image = photoInput.value.files[0]; } form.post(route('admin.user.update', {user: id})); } const onImageUpLoad = () => { const photo = photoInput.value.files[0]; if (! photo) return; const reader = new FileReader(); reader.onload = (e) => { photoImage.value = e.target.result; }; reader.readAsDataURL(photo); } </script>

行動規範の内容に同意します