Vue+Axios上传文件至Laravel7 API时传Null，报错store()调用失败

你遇到的问题很典型——明明能拿到File对象，但Axios提交后后端接收不到文件，最后报错Call to a member function store() on null。这是因为直接把File对象放进普通JS对象里作为Axios的data参数，没办法正确被解析为multipart/form-data格式的请求。

问题根源 #

当你手动设置'Content-Type': 'multipart/form-data'但用普通对象传数据时，Axios没办法自动添加请求所需的boundary分隔符，后端也就无法正确解析文件字段。而且普通对象里的File对象会被序列化为空对象{}，这就是你看到payload里image为空的原因。

修复步骤 #

1. 修改Axios提交逻辑，改用FormData

把你的createTask方法改成这样：

createTask() {
  const formData = new FormData();
  // 追加表单字段
  formData.append('task_id', this.task.id || '');
  formData.append('title', this.task.title);
  formData.append('content', this.task.content);
  formData.append('created_by', this.$userId);
  // 追加文件
  const imageFile = document.getElementById('image').files[0];
  if (imageFile) {
    formData.append('image', imageFile);
  }

  axios({
    method: 'post',
    url: '/api/tasks',
    data: formData,
    // 这里不需要手动设置Content-Type，Axios会自动处理（包括添加boundary）
    // headers: { 'Content-Type': 'multipart/form-data' }
  })
  .then(res => {
    this.$emit("task-created");
    this.task = {};
    // 可选：清空文件输入框
    document.getElementById('image').value = '';
  })
  .catch(error => {
    console.log(error);
  });
}

2. 可选：用Vue的方式管理文件（更符合Vue开发习惯）

你可以在Vue实例的data里加一个imageFile属性，然后通过@change事件绑定文件，避免直接操作DOM：

<!-- 修改模板里的文件输入框 -->
<input type="file" id="image" name="image" @change="handleFileChange" />

然后添加对应的方法：

data() {
  return {
    task: {},
    imageFile: null
  }
},
methods: {
  handleFileChange(e) {
    this.imageFile = e.target.files[0];
  },
  removeImage() {
    this.imageFile = null;
    document.getElementById('image').value = '';
  },
  createTask() {
    const formData = new FormData();
    formData.append('task_id', this.task.id || '');
    formData.append('title', this.task.title);
    formData.append('content', this.task.content);
    formData.append('created_by', this.$userId);
    if (this.imageFile) {
      formData.append('image', this.imageFile);
    }

    // 后面的Axios请求逻辑和上面一致
  }
}

3. 优化Laravel控制器的容错处理

为了避免文件不存在时的报错，在控制器里先判断文件是否存在：

public function store(Request $request) {
    $task = $request->isMethod('put') ? Task::findOrFail($request->task_id) : new Task;
    
    $task->title = $request->input('title');
    $task->content = $request->input('content');
    $task->created_by = $request->input('created_by');
    // 注意：task_id不需要手动赋值，Laravel的模型会自动处理主键（除非你要更新）
    
    // 先检查是否有上传的文件
    if ($request->hasFile('image')) {
        $task->image = $request->file('image')->store('images');
    }

    if($task->save()) {
        return new TaskResource($task);
    }
}

另外，你原来的代码里手动给$task->id = $request->input('task_id')，如果是创建新任务的话，这个值是空的，可能会导致问题，所以建议去掉这一行，让Laravel自动生成主键。

这样修改后，文件应该就能正常上传到后端，并且被正确存储了。

内容的提问来源于stack exchange，提问作者Kishan Suresh