$.post 上传文件_基于 Laravel + Vue 组件实现文件异步上传

最新推荐文章于 2024-09-11 07:49:30 发布

Clever Liu

最新推荐文章于 2024-09-11 07:49:30 发布

阅读量540

点赞数

文章标签： $.post 上传文件

本文链接：https://blog.csdn.net/weixin_34668147/article/details/112127411

版权

本文详细介绍了如何使用 Laravel 和 Vue.js 实现文件异步上传功能，从定义上传文件路由、初始化控制器方法，到编写前端表单视图、Vue 组件，再到测试和优化代码，最后提供了上传成功后的图片预览功能。教程中还涵盖了 CSRF 保护、文件保存策略以及 Intervention Image 扩展包的使用建议。

摘要由CSDN通过智能技术生成

我们在上一篇教程中已经演示了如何通过 Request 请求实例获取各种文本输入数据，但是还有一种输入数据我们没有涉及到，那就是文件上传。我们可以通过 Request 请求实例提供的 file 方法获取用户上传文件，并将其保存到指定目录从而完成文件上传，接下来，我们将从前端到后端实现一个完整的用户上传文件功能，包括视图、路由、控制器部分代码。

定义文件上传路由

首先我们在 routes/web.php 中定义上传文件涉及到的路由：

// 用于显式上传表单
Route::get('form', 'RequestController@formPage');
// 用于处理文件上传
Route::post('form/file_upload', 'RequestController@fileUpload');

我们定义了一个 GET 路由 /form，用于渲染用户上传表单页面，然后定义了一个 POST 路由 /form/file_upload，用于实现文件上传逻辑。

接下来去控制器中初始化这两个方法。

初始化控制器方法

打开 app/Http/Controllers/RequestController.php，初始化路由定义中指定的控制器方法，首先是 formPage 方法用于渲染表单视图，我们约定视图路径是 request.form(可以先创建一个空的视图文件 resources/views/request/form.blade.php)：

public function formPage(){
    
    return view('request.form');
}

然后是 fileUpload 方法，用于处理 POST 请求实现文件上传，假定前端文件输入框对应 name 属性是 picture，如果请求内容中包含该字段，则将对应文件实例打印出来(文件上传保存实现代码后面再完善)：

public function fileUpload(Request $request){
    
    if ($request->hasFile('picture')) {
    
        dd($request->file('picture'));
    }
}

编写前端表单视图

接下来，就可以到前端编写视图文件了，我们将通过单独的 Vue 组件实现前端文件异步上传操作，所以编写视图文件 resources/views/request/form.blade.php 代码如下：

html>
<html lang="{
    { app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{
    { csrf_token() }}">

        <title>表单请求ti