php - 上传文件返回 NULL - 带有 Laravel 8 的 VueJs3

Question

我有一个问题我尝试了很多东西但没有解决所以请我需要你的帮助

这是我的 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(()=>{
               //     
           })
   },
}

在控制器中我尝试调试请求，但它总是返回NULL

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

结果

null

"name"

array:2 [▼

  "cat_name" => "name"

  "img_url" => null
]

标签： phplaravelvue.js

Answer 1

根据官方文档

<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>

参考：https ://inertiajs.com/file-uploads#form-data-conversion