php - 未捕获（承诺中）错误：请求失败，状态码为 422

Question

我遇到了未捕获的错误。我不知道为什么会发生错误。我看到一些与此问题相关的帖子，但我找不到我的错误。当我发送发布请求时，它会给出如下错误。 Uncaught (in promise) Error: Request failed with status code 422 我是一个非常初学者。我怎么解决这个问题？请帮我。

我的 Create.vue：

<template>
  <div class="container">
    <div class="row">
      <div class="col-10">
        <div class="card">
          <div class="card-header d-flex justify-content-between alin-item-center"> 
            <h5>Create product</h5>
            <a href="#" class="btn btn-primary ">Product List</a>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-6 offset-3">
                 <form @submit.prevent="createProduct">
              <div class="form-group">
                <label for="">Product Title</label>
               <input type="text" v-model="productForm.title" class="form-control" name="title" required="" placeholder="product title">
              </div>
              <div class="form-group">
                <label for="">Product price</label>
               <input type="text" v-model="productForm.price" class="form-control" name="price" required="" placeholder="product price">
              </div>
             
              <div class="form-group">
                <label for="">Product image</label>
               <input type="file"  class="form-control-file" @change="onImageChange"  placeholder="categoryname">
              </div>
              <div class="form-group">
                <label for="">Description</label>
               <textarea  v-model="productForm.description" class="form-control" name="description" required="" placeholder="product description"></textarea>
              </div>
                <div class="form-group">
               <button type="submit" class="btn btn-success mb-3">Create product</button>
              </div>
            </form>
              </div>
            </div>
           
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Form } from 'vform'
import { objectToFormData } from 'object-to-formdata'
export default {
    data(){
        return {
            productForm: new Form({
                title: '',
                price: '',
                image: '',
                description: '',
            }),
        }
    },
    methods: {
        createProduct(){
            this.productForm.post('/api/product', {
                transformRequest: [function (data, headers) {
                    return objectToFormData(data)
                }],
                onUploadProgress: e => {
                    // Do whatever you want with the progress event
                    console.log(e)
                }
            }).then(({ data }) => {
                this.productForm.title = '';
                this.productForm.price = '';
                this.productForm.image = '';
                this.productForm.description = '';
                this.$toast.success({
                  title:'Success!',
                  message:'Product Uploaded successfully.'
                });
            })
        },
        onImageChange(e){
            const file = e.target.files[0]
            // Do some client side validation...
            this.productForm.image = file
        }
    }
}
</script>
<style>

</style>

我的 ProductController.php：

<?php

namespace App\Http\Controllers;

use App\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required|max:255|unique:products,title',
            'price' => 'required|integer',
            'image' => 'required|image|max:2048',
            'description' => 'required',
        ]);

        $product = Product::create([
            'title' => $request->title,
            'slug' => Str::slug($request->title),
            'price' => $request->price,
            'description' => $request->description,
        ]);

        if($request->image){
            $imageName = time().'_'. uniqid() .'.'.$request->image->getClientOriginalExtension();
            $request->image->move(public_path('storage/product'), $imageName);
            $product->image = '/storage/product/' . $imageName;
            $product->save();
        }

        return response()->json($product, 200);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\cr  $cr
     * @return \Illuminate\Http\Response
     */
    public function show(cr $cr)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\cr  $cr
     * @return \Illuminate\Http\Response
     */
    public function edit(cr $cr)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\cr  $cr
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, cr $cr)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\cr  $cr
     * @return \Illuminate\Http\Response
     */
    public function destroy(cr $cr)
    {
        //
    }
}

api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::resource('category','CategoryController');
Route::resource('product','ProductController');

Route::group([

    'middleware' => 'api',
    'prefix' => 'auth'

], function ($router) {

    Route::post('login', 'AuthController@login');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('me', 'AuthController@me');

});

提前致谢

标签： phplaravelvue.jslaravel-7