有了Laravel, 你可以不用担心PHP的SuperGlobal 'Files' 变量了.再也不用为处理简单的文件上传而乱写一气的代码行数了.Laravel的工作流程,通过表单提交来实现文件上传,不仅容易操作,而且似乎从一开始就能完美地工作。
在这篇文章中, 我们将经历如何通过HTML表单从前端上传文件的步骤。将文件存储在项目目录中,同时将图像源路径保存在数据库中。
题外话:本教程将适用于Laravel5, 6, 7, 和 8版本。当不同版本的语法不同时, 不同的语法将被演示.
前提条件
本教程假设你已经有了一个Laravel环境, 并配置了一个数据库.
让我们开始吧!
首先, 我们需要在数据库中建立一个新的表, 来保存上传图片的源路径信息.
第1步 - 创建模型
让我们直接跳进去,在项目的根目录下加载控制台。
点选以下命令 -
php artisan make:model Product
如果你使用的是Laravel 6或7,这将在你的App/文件夹中创建一个新的文件,如果你使用的是Laravel 8,则是App/Models。
第2步 - 创建模型迁移
再次回到控制台,并输入以下命令
php artisan make:migration create_products_table
这将添加新的迁移文件到项目的数据库/migrations文件夹。
步骤2.1
up()
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('file_path');
$table->timestamps();
});
}
保存该文件,准备迁移!
第3步 - 运行迁移
你已经猜到了,回到控制台,运行下面的命令------。
php artisan migrate
执行这个命令后,你应该在控制台中看到某种类型的响应,就像这样----。
Migrating: 2020_11_19_191505_create_product_table Migrated: 2020_11_19_191505_create_product_table (8.49ms)
第4步 - 配置模型
接下来, 是时候编写一些代码了, 在你的App/文件夹中找到Product.php模型文件,如果你使用的是Laravel 6或7,如果你使用的是Laravel 8,App/Models。
在模型类中添加一个可填充属性,以确保当我们从表单中提交数据时,模型被配置为接受指定字段的数据。
protected $fillable = ["name", "file_path", "created_at", "updated_at"];
第5步 - 创建一个资源丰富的控制器
回到控制台,通过执行以下命令创建一个新的控制器 -
php artisan make:controller ProductController --resource
第6步 - 配置路由
为了简单起见,我们将配置一个资源丰富的路由来匹配资源丰富的控制器。虽然我们不会使用很多路由,但有一些路由对于上传图片和在数据库中存储信息非常重要。
我们将特别使用的路由是创建和存储的。
根据你的版本,在你的routes/web.php文件中添加以下内容之一----。
Route::resource('products', 'WebControllers\ProductController'); // Laravel 5,6,7
// OR
Route::resource('products', 'App\Http\Controllers\ProductController'); // Laravel 8
第7步 - 创建创建视图
现在我们已经为上传图片、将其存储在数据库和文件目录中配置了所有的基础,我们可以专注于一些编码。但首先,让我们创建视图 --
- 在resources/views文件夹中创建一个名为products的新文件夹。
- 在resources/views/products文件夹中创建一个新文件,名为create.blade.php。
**注意:**如果你已经配置了布局,请将它们添加到这个新的视图文件中,如果没有,你可以使用下面的代码将是一个简单的HTML模板与一个表单。
第7.1步 - 添加HTML和刀片的语法
将以下代码添加到你的刀片,或简单地使用
块添加到你自己的布局模板。注意:确保enctype="multipart/form-data" ,否则文件将无法正确传输。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body>
<!-- if validation in the controller fails, show the errors -->
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div>
<form action="{{ route('products.store') }}" method="post" enctype="multipart/form-data">
<!-- Add CSRF Token -->
@csrf
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="name" required>
</div>
<div class="form-group">
<input type="file" name="file" required>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
第8步 - 配置产品控制器的创建功能
接下来,我们需要配置产品控制器的创建函数来返回新创建的视图。
继续前进,找到我们之前使用php artisan创建的控制器。它将位于App/Http/Controllers文件夹中。
打开它,在create() 函数中添加以下代码。
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('products.create');
}
第9步 - 测试渲染创建视图
现在来测试一下我们到现在为止所做的路由、控制器和视图是否真的有效。打开浏览器,导航到
http://localhost/products/create
或
http://your\_url/products/create
对我来说,这是一个非常基本的,带有表单的空页面,就像下面这样

很完美!
第十步 - 配置产品控制器的商店功能
现在是最重要的事情,我们需要商店控制器来处理创建视图中的表单提交。不仅如此,我们还需要它处理文件,能够将文件存储在本地,并将文件路径和产品名称一起存储在数据库中。
因此,回到ProductController中,找到store() 函数,将其重构为下面的样子,注意每个阶段的代码注释。
public function store(Request $request)
{
// Validate the inputs
$request->validate([
'name' => 'required',
]);
// ensure the request has a file before we attempt anything else.
if ($request->hasFile('file')) {
$request->validate([
'image' => 'mimes:jpeg,bmp,png' // Only allow .jpg, .bmp and .png file types.
]);
// Save the file locally in the storage/public/ folder under a new folder named /product
$request->file->store('product', 'public');
// Store the record, using the new file hashname which will be it's new filename identity.
$product = new Product([
"name" => $request->get('name'),
"file_path" => $request->file->hashName()
]);
$product->save(); // Finally, save the record.
}
return view('products.create');
}
第11步 - 是时候试试了
现在所有的编码都完成了,最后要做的是测试它,找到一个你想上传的图片,然后在浏览器中进入创建视图。
我将上传一个名为 "咖啡 "的产品,上面有一袋咖啡的图片。(开发者如何原创)
输入名称,并找到你要上传的图片,然后点击提交按钮。目前控制器的配置方式是,它将渲染回创建视图。所以让我们看看它取得了什么成果。
数据库中的记录

项目目录中的文件

从保存的记录和项目目录中的文件可以看出,它有一个新的名字,也是一个相当独特的名字。它重命名了原来的图像名称,但保留了其他一切。此外,该图像现在已经被添加到app/public/product文件夹中,这使得它可以被识别,以用于可能上传的更多类型的图像。
这就是它!
总结
在这篇文章中, 它花了11个步骤来速成在Laravel中上传图片, 你可以从这个教程中看到, 与用原始PHP语法上传文件相比, 它是非常容易的。你不必担心很多事情, 而且用Laravel也会更干净。我希望这篇文章能帮助你解决文件上传的问题.直到下一次!