上传文件返回 NULL - VueJs3 与 Laravel 8

Question

I have a problem I tried many things but is doesn't fixed so please I need your help

this is my Vue Temp:

<form @submit.prevent="createCat" enctype="multipart/form-data" method="POST">

   <div class="mt-1 relative rounded-md shadow-sm mb-3">
      <input id="cat_name" type="text" v-model="categories.cat_name" />
   </div>

   <div class="mt-1 relative rounded-md shadow-sm mb-3 w-50">
      <input name="img_url" id="img_url" accept="image/*" type="file">
   </div>                       
   <button type="submit">Add</button>

</form>

data(){
    return{
      categories:{
         cat_name: '',
         img_url: null,
      },
    }
},
methods:{
   createCat(){
      let data = new FormData();
      data.append('cat_name', this.categories.cat_name);
      data.append('url', this.categories.img_url);
      this.$inertia.post('/categories', this.categories)
           .then(()=>{
               //     
           })
   },
}

and in the Controller I tried debug the requests but it always return NULL

public function store(Request $request)
    {
        dump($request->file('img_url'));
        dump($request->cat_name);
        dump($request->all());
    }

The Result

null

"name"

array:2 [▼

  "cat_name" => "name"

  "img_url" => null
]

Answer 1

As per official documentation

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { useForm } from '@inertiajs/inertia-vue3'

export default {
  setup () {
    const form = useForm({
      name: null,
      avatar: null,
    })

    function submit() {
      form.post('/users')
    }

    return { form, submit }
  },
}
</script>

Ref: https://inertiajs.com/file-uploads#form-data-conversion

Answer 2

i found the solution for this problem:

the input field must be like that:

<input name="img_url" id="img_url" type="file" @input="categories.img_url = $event.target.files[0]" />

Update

and I figure out that I have to change the variable name because I used the same variable for the props and the data variable that I want to store it and send it to backend, so I make the props from backend categories and the data that I want to store it category .