时间戳

首页 > 解决方案 > 图像不适用于更新方法 | Laravel + VueJs

laravel - 图像不适用于更新方法 | Laravel + VueJs

问题描述

我设法用图像创建了一个帖子，现在我也希望能够更新它。在我添加了更新图像的选项之前，更新方法一切正常。一切都得到更新，除了给我一个 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}
"}

如何用图片更新帖子？

标签： laravelvuejs2axiosimage-upload

解决方案

然后我注意到首先我使用了错误的属性名称，所以我使用 $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 。

推荐阅读