使用 Laravel9 Vue3 在 public/images 中存储图像

Question

所以我目前正在使用 Laravel9 和 Vue3，我正在尝试将图像上传到 public/images 中名为 cars_images 的文件夹，然后存储 link 图像区域中名为汽车的 table 中的图像。我对编码相当陌生，我缺乏使所有这些可能的 atm 的知识，任何帮助将不胜感激。

这是我要上传到的组件（PS。我有更多请求，所以 addcar 提交已经存在，我只需要帮助解决这个具体问题。

<template>
 <form
  @submit.prevent="addcar"
  enctype="multipart/form-data"
 >
   <div class="form-outline form-white mb-4">
        <input
        type="file"
        class="form-control form-control-lg"
       />
   </div>

</template>

<script>
export default {
methods: {
        addcar() {
            axios
                .post("/api/addcar", this.form)

                .catch((error) => console.log(error.response.data));
        },
}
</script>

和 php 文件

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\Car;
use Illuminate\Http\Request;
use DB;

    // add car
    public function addcar(Request $request)
    {
        $car = new Car([            
         'image' =>$request->image,
        ]);
        $car->save();

        return response()->json('Car successfully added');
    }

以及路线中的路线api

Route::post('/addcar', [CarController::class, 'addcar']);

如果还有什么需要补充的，请告诉我。

Answer 1

这是一个简单的图片保存功能：

 public function store(Request $request)
{
    
        $request->validate([
        'image'         =>   'required'

    ]);

    $image = $request->file('image');
    $new_name = rand() . '.' . $image->getClientOriginalExtension();
    $image->move(public_path('images'), $new_name);
 
    $form_data = array(

         'image'            =>   $new_name,
      
    );

    YOUR_MODEL::create($form_data);

    return redirect('YOUR_PAGE')->with('success', 'Image Added successfully.');
}

使用 Laravel9 Vue3 在 public/images 中存储图像

Storing an image in public/images using Laravel9 Vue3

html

php

laravel

vue.js

vuejs2