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

我们在上一篇教程中已经演示了如何通过 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>
getLocale() }}">