axios 在将文件上传到 laravel api 时发送 null。错误消息：“在 null 上调用成员函数 store()”

Question

我有一个带有文件上传的表单。我目前正在使用 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: {}}

我们可以看到图片属性是空的

响应错误信息

"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（英国夏令时间）{} 名称：“test.jpg” 尺寸：436632 类型：“图像/JPEG” webkitRelativePath: "" 原型：文件

Answer 1

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

Answer 2

假设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阅读此处了解更多信息