vue.js - 如何使用 laravel 后端 API 在 nuxt.js 中上传图片
问题描述
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>
解决方案
有几件事需要考虑。
首先,您的模板表单。
<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
and 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 等。我将根据您的回复更新此答案。
推荐阅读
- javascript - 如何检测 WordPress 定制器预览 iframe 的宽度?
- flutter - 退格不能与 TextInputFormatter 一起正常工作
- java - 如何在java中同步localhost数据库和服务器?
- django - 通过 Post 请求接收到的数据为 None。为什么有可能
- selenium-webdriver - 在 Selenium 中难以找到正确的 xpath
- ios - SnapChat 登录 - 我正在尝试在我的应用程序中实现 SCSDK 以使用 SnapChat 登录,但应用程序不会重定向回来
- css - 使用 css 动画移动 svg 圆
- spartacus-storefront - SAP Spartacus - 如何在 Spartacus UI 中显示自定义组件
- python-3.x - 如何从已离开公会的用户的邀请中删除?
- python - 没有使用 python 解析对文本文件的更新