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>

axios 提交

     createTask() {
console.log(document.getElementById('image').files[0])
              axios({
                    headers: { 'Content-Type': 'multipart/form-data' },method: 'post',url: '/api/tasks',data: {
                        task_id : this.task.id,title : this.task.title,content : this.task.content,created_by : this.$userId,image : document.getElementById('image').files[0],}
                })
                .then(res => {
                    // check if the request is successful
                    this.$emit("task-created");
                    this.task = {}
                })
                .catch(function (error){
                    console.log(error)
                });
           }

我的控制器代码

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: {}}

我们可以看到image属性为空

响应错误信息

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

console.log(document.getElementById('image').files[0]) 的输出

File {name: "test.jpg",lastModified: 1590920737890,lastModifiedDate: Sun May 31 2020 11:25:37 GMT+0100 (British Summer Time),webkitRelativePath: "",size: 436632,…}

最后修改时间：1590920737890 lastModifiedDate：2020 年 5 月 31 日星期日 11:25:37 GMT+0100（英国夏令时间）{} 名称：“测试.jpg” 尺寸：436632 类型：“图像/jpeg” webkitRelativePath:"" 原型：文件

解决方法

我通过如下更改 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)
     });
}

,

假设 image 列具有正确的结构，您可以尝试使用以下内容：

<?php
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->hasFile('images') 
       ? $request->file('images')
       : null; 
        
    if($task->save()) {
        return new TaskResource($task);
    }
}

laravel 5.4 upload image 阅读此处了解更多信息