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

Posted 2023-02-16

【中文标题】如何使用 laravel 后端 API 在 nuxt.js 中上传图片

【英文标题】：how to upload image in nuxt.js using laravel backend API

【发布时间】：2021-01-24 07:29:30

【问题描述】：

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

如何在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-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>

【问题讨论】：

在您的模板中，您的表单正在调用一个不存在的方法。 @submit.prevent=“submit”是说“当提交按钮被按下时，运行方法‘submit’”。您需要创建一个名为 submit 的方法，并在该方法中将表单数据发送到您的 laravel api。

@Nick Dawes 你能发表你的答案吗

@Nick Dawes 不工作你能发布答案吗

@Nick Dawes 请帮助我，我是 nuxt.js 的新手，我的谦虚请求

【参考方案1】：

有一些事情需要考虑。

首先，您的模板表单。

<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 等。我会根据你的回复更新这个答案。

【讨论】：

感谢您的回复我创建了方法我的方法： async submit() await this.$axios.$post('/Employeeregister', this.form) this.$router.push(' /') 但它给出了错误我选择了图像文件，但它给出了错误 消息：“给定数据无效。”，... 错误：图像：[“图像字段是必需的。”] 消息：“给定的数据无效。”

在发送图片文件时，需要将表单的enctype设置为multipart/form-data。您可以通过将第三个参数传递给您的 axios 调用 $post(url, formData, headers: 'content-type':'multipart/form-data' )

刚出去遛狗，如果到那时还没人回复你，30 分钟后就可以了 :)

好的，我知道您的回复，我收到此错误语法错误：意外字符 ''' (175:73)

更新了 submit() 方法。