图像不适用于更新方法 | Laravel + VueJs答案

【问题标题】：Image does not work on update method | Laravel + VueJs图像不适用于更新方法 | Laravel + VueJs
【发布时间】：2018-11-27 00:36:04
【问题描述】：

我设法用图片创建了一个帖子，现在我也希望能够更新它。在我添加了更新图像的选项之前，更新方法一切正常。除了给我 500 内部服务器错误的图像之外，所有内容都会更新。

我可以在创建帖子时保存图像，但如果我尝试更新帖子图像，则会出现 500 内部服务器错误。当我检查控制台时，它如下所示：

这是我在控制器中的更新方法：

public function update(Request $request, $id)
{
    $exploded = explode(',', request('image'));
    $decoded = base64_decode($exploded[1]);
    if(str_contains($exploded[0], 'jpeg'))
        $extension = 'jpg';
    else
        $extension = 'png';   

    $fileName = str_random().'.'.$extension;
    $path = public_path().'/'.$fileName;
    file_put_contents($path, $decoded);

    $post = Post::findOrFail($id);
    $post->title = request('title');
    $post->description = request('description');
    $post->category_id = request('category_id');
    $post->user_id = Auth::id();
    $post->photo = $fileName;
    $post->save();

    return response()->json([
        'post' => $post,
    ], 200);
}

在我的 vue 模板中，我在 html 中使用了这个

<div class="form-group">
  <label>Image</label>
  <input type="file" @change="imageChanged" class="form-control">
</div>

imageChanged 方法如下所示：

 imageChanged(e){
   var fileReader = new FileReader()
   fileReader.readAsDataURL(e.target.files[0])
   fileReader.onload = (e) => {
      this.post.photo = e.target.result
   }
 },

编辑帖子如下所示：

editPost(){
  axios.patch('/api/posts/' + this.update_post.id, {
      title: this.update_post.title,
      description: this.update_post.description,
      category_id: this.update_post.category_id,
      photo: this.update_post.photo
  })
  .then(response => {
    this.showPosts();
  })
  .catch(function(error){
    console.log(error);
  });
}

我在错误日志中看到以下内容，但不知道它们的含义：

#47 C:\\xampp\\htdocs\\sidneyblog\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
#48 C:\\xampp\\htdocs\\sidneyblog\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php(104): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
#49 C:\\xampp\\htdocs\\sidneyblog\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php(151): Illuminate\\Pipeline\\Pipeline->then(Object(Closure))
#50 C:\\xampp\\htdocs\\sidneyblog\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php(116): Illuminate\\Foundation\\Http\\Kernel->sendRequestThroughRouter(Object(Illuminate\\Http\\Request))
#51 C:\\xampp\\htdocs\\sidneyblog\\public\\index.php(55): Illuminate\\Foundation\\Http\\Kernel->handle(Object(Illuminate\\Http\\Request))
#52 {main}
"}

如何用图片更新帖子？

【问题讨论】：

你检查错误日志了吗？
不熟悉那个@rkj
检查 storage/logs/laravel.log
向我展示了大约 8000 行代码。
如果你仔细看那个文件，你可以看到 500 错误的原因

标签： laravel vuejs2 axios image-upload

【解决方案1】：

然后我注意到我首先使用了错误的属性名称，所以我使用 $this.update_post 替换了我的函数，而不是 this.post

imageChanged(e){
   var fileReader = new FileReader()
   fileReader.readAsDataURL(e.target.files[0])
   fileReader.onload = (e) => {
      this.post.photo = e.target.result
   }
 }

然后使用@rkj 提示，我更改了补丁方法并改用了 put。

【讨论】：