Vue.js axios在将文件上载到laravel api时发送null。错误消息："；在null上调用成员函数store（）；

我有一个文件上传的表格。目前我正在使用vue、axios和laravel 7

我的表格如下：

               <form v-on:submit.prevent="createTask" enctype="multipart/form-data" method="post">
                   <div class="form-group">
                        <label for="title">Title</label>
                            <input  type="text" class="form-control" name="title" id="title" v-model="task.title" />  
                            <label for="content">Content</label>
                            <textarea v-model="task.content" class="form-control" id="content" name="content" rows="4" ></textarea>
                              
                            <button type="submit" class="btn btn-sm btn-primary
               pull-right" style="margin:10px; padding:5 15 5 15; background-color:#4267b2">Save Task</button>       
                            <span>
                                <button @click="removeImage" class="btn btn-sm btn-outline-danger" style="margin:10px; padding:5 15 5 15; ">Remove File</button>
                            </span> 
                             <input type="file" id="image" name="image" />
                     </div>
                </form>

我的控制器代码

public function store(Request $request)
{
    
    $task = $request->isMethod('put') ? Task::findOrFail($request->task_id) : New Task;
    $task->id = $request->input('task_id');
    $task->title = $request->input('title');
    $task->content = $request->input('content');
    $task->views = $request->input('views');
    $task->created_by = $request->input('created_by');
    $task->image = $request->image->store('images');
    
    //$task->image = $request->file('image')->store('images');
    
    if($task->save()) {
        return new TaskResource($task);
    }
}

请求有效负载

{task_id: "", title: "test", content: "test content", created_by: "1", image: {}}

我们可以看到图像属性为空

响应错误消息

"Call to a member function store() on null"

console.log（document.getElementById（'image'）.files[0]）的输出

最后修改：1590920737890 最后修改日期：太阳2020年5月31日11:25:37 GMT+0100（英国夏季时间）{} 名称：“test.jpg” 尺码：436632 键入：“图像/jpeg” webkitRelativePath:“

---

proto：File

假设

image

列具有正确的结构，您可以尝试以下操作：

---

我通过如下更改axios post请求解决了这个问题。我使用FormData追加数据并将数据发送到服务器

 createTask() {
    let data = new FormData;
    data.append('image', document.getElementById('image').files[0]);
    data.append('task_id', this.task.id);
    data.append('title', this.task.title);
    data.append('content', this.task.content);
    data.append('created_by', this.$userId);

    axios({
        headers: { 'Content-Type': 'multipart/form-data' },
        method: 'post',
        url: '/api/tasks',
        data: data
     })
     .then(res => {
        // check if the request is successful
        this.$emit("task-created");
        this.image = '';
        this.task = {}
     })
     .catch(function (error){
        console.log(error)
     });
}

这不管用。上传文件时，
$request->hasFile
返回false。我认为问题不在于控制器，而在于前端
File {name: "test.jpg", lastModified: 1590920737890, lastModifiedDate: Sun May 31 2020 11:25:37 GMT+0100 (British Summer Time), webkitRelativePath: "", size: 436632, …}

 createTask() {
    let data = new FormData;
    data.append('image', document.getElementById('image').files[0]);
    data.append('task_id', this.task.id);
    data.append('title', this.task.title);
    data.append('content', this.task.content);
    data.append('created_by', this.$userId);

    axios({
        headers: { 'Content-Type': 'multipart/form-data' },
        method: 'post',
        url: '/api/tasks',
        data: data
     })
     .then(res => {
        // check if the request is successful
        this.$emit("task-created");
        this.image = '';
        this.task = {}
     })
     .catch(function (error){
        console.log(error)
     });
}