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

问题描述

nuxt.js我搜索了很多使用laravel api上传图像的教程，但是我不知道如何编码图像上传的逻辑，这有助于我解决这个问题或提供教程链接。

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

i创建了用于上传图片的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-col cols="12" sm="12"><v-file-field v-model.trim="form.image" type="file" label="image" solo autocomplete="off"></v-file-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: '',image: '',}
      }
    },} <
  /script>

解决方法

有几件事要考虑。

首先，您的模板表单。

<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-col cols="12" sm="12">
        <v-file-field v-model.trim="form.image" type="file" label="image" solo autocomplete="off"></v-file-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>

您的输入字段绑定到form.name和form.image，这是正确的。为了提交表单，您已经将submit按钮绑定到名为Submit（@submit.prevent="submit"）的方法上，但是尚未创建该方法。所以什么也没发生！ （您会在控制台中看到警告。）

要创建该方法，请将其添加到methods:属性下的组件中。

export default {
  middleware: ['guest'],data() {
    return {
      form: {
        name: '',image: '',}
    }
  },methods: {
    async submit() {
      let rsp = await this.$axios.$post('/Employeeregister',this.form,{
        'content-type': 'multipart/form-data'
      })
      console.log(rsp.response)
    }
  }
}

将表单数据发送到Laravel API很简单，但是有一些注意事项。您的nuxt应用程序和laravel API托管在哪里？例如。 http：// localhost：3000，http：// localhost：80等。我将根据您的回复更新此答案。