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

【问题标题】：Uploading Files return NULL - VueJs3 with Laravel 8上传文件返回 NULL - 带有 Laravel 8 的 VueJs3
【发布时间】：2021-06-03 15:29:59
【问题描述】：

我有一个问题，我尝试了很多方法，但都没有解决，所以我需要你的帮助

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

在 Controller 我尝试调试请求，但它总是返回 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
]

【问题讨论】：

尝试一次 this.$inertia.post('/categories')
inertiajs.com/file-uploads#form-data-conversion
但是没有数据会这样发布：this.$inertia.post('/categories')
查看官方图书馆的链接一次。如果仍然无法正常工作，那么有人会提供帮助
我终于解决了：我只是将它添加到 INPUT 中：@input="categories.img_url = $event.target.files[0]"

标签： php laravel vue.js

【解决方案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

【讨论】：

【解决方案2】：

我找到了解决这个问题的方法：

输入字段必须是这样的：

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

更新

我发现我必须更改变量名称，因为我对道具和数据变量使用了相同的变量，我想存储它并将其发送到后端，所以我从后端制作道具类别以及我要存储的数据类别。

【讨论】：