laravel - nuxt.js 如何使用 laravel 后端 API 上传图片

Question

我对图片上传感到震惊帮助我，我在 nuxt.js 中学到了很多东西，但我对图片上传感到震惊。

如何在 nuxt.js 中制作图片上传表单

我为图片上传创建了 laravel API。

我的路由器

Route::group(['middleware' => 'auth:api'], function() {
    Route::post('/Employeeregister', 'EMPLOYEE_API\RegisterController@register')->name('Employeeregister'); 
}); 

控制器代码

public function imageUploadPost(Request $request)
{
    $request->validate([
        'name' =>  'required | string',
        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

    $imageName = time().'.'.$request->image->extension();  
   
    $request->image->move(public_path('images'), $imageName);
   
    return back()
        ->with('success','You have successfully upload image.')
        ->with('image', $imageName);       
}

我的 Nuxt 代码

<template>
    <v-row justify="center">
        <v-col cols="12" sm="6">
            <form @submit.prevent="submit">
                <v-card ref="form" >
                    <v-card-text>
                        <h3 class="text-center">Register</h3>
                        <v-divider class="mt-3"></v-divider>
                        <v-col cols="12" sm="12">
                            <v-text-field v-model.trim="form.name" type="text" label="Full Name" solo autocomplete="off"></v-text-field>
                        </v-col>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <div class="text-center">
                            <v-btn rounded type="submit" color="primary" dark>Register</v-btn>
                        </div>
                    </v-card-actions>
                </v-card>
            </form>
        </v-col>
    </v-row>
</template>

<script>
  export default {
    middleware: ['guest'],
    data() {
      return {
        form: {
          name: '',
        }
      }
    },
  } 
</script>

标签： laravelvue.jslaravel-5eloquentnuxt.js