7.2.4 “文章图片”上传文件输入框-Yii2框架从入门到精通(中)

当前位置:　首页>> 技术小册>> Yii2框架从入门到精通(中)

7.2.4 “文章图片”上传文件输入框

在Web开发中，文件上传是一个常见且重要的功能，特别是在构建内容管理系统（CMS）或博客平台时，如使用Yii2框架开发文章发布系统时，允许用户为文章添加图片是提升内容可读性和吸引力的关键步骤。本章节将详细讲解如何在Yii2框架中实现“文章图片”的上传功能，包括前端文件输入框的创建、后端处理逻辑以及文件存储策略。

7.2.4.1 前端实现：创建文件上传输入框

在Yii2中，文件上传通常通过HTML的<input type="file">标签实现。为了与Yii2的表单验证和文件处理机制无缝集成，建议使用Yii2的ActiveForm组件来构建表单。以下是一个简单的示例，展示了如何在文章编辑表单中添加图片上传功能。

视图文件（例如：views/article/update.php）

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
/* @var $this yii\web\View */
/* @var $model app\models\Article */
/* @var $form yii\widgets\ActiveForm */
?>
<div class="article-update">
    <h1><?= Html::encode($this->title) ?></h1>
    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>
    <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
    <?= $form->field($model, 'content')->textarea(['rows' => 6]) ?>
    <!-- 图片上传输入框 -->
    <?= $form->field($model, 'imageFile')->fileInput() ?>
    <!-- 显示已上传的图片（如果有） -->
    <?php if (!empty($model->image)): ?>
        <div class="form-group">
            <img src="<?= Yii::$app->request->baseUrl . '/uploads/' . $model->image ?>" alt="Article Image" style="max-width: 200px;">
            <p>Current Image: <?= Html::a('Delete', ['delete-image', 'id' => $model->id], ['class' => 'btn btn-danger btn-sm', 'data' => [
                'confirm' => 'Are you sure you want to delete this image?',
                'method' => 'post',
            ]]) ?></p>
        </div>
    <?php endif; ?>
    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
    </div>
    <?php ActiveForm::end(); ?>
</div>

注意几个关键点：

enctype 属性在 ActiveForm::begin() 方法中被设置为 'multipart/form-data'，这是处理文件上传所必需的。
使用 $form->field($model, 'imageFile')->fileInput() 创建文件上传输入框，其中 'imageFile' 应该是你的模型（Article）中用于接收上传文件的属性。
如果文章已有图片，则显示该图片并提供删除链接。

7.2.4.2 后端处理：文件上传逻辑

在Yii2中，文件上传通常涉及模型验证和文件保存两个步骤。

模型验证（Article.php）

首先，在模型中添加文件上传的验证规则。

namespace app\models;
use Yii;
use yii\base\Model;
use yii\web\UploadedFile;
class Article extends \yii\db\ActiveRecord
{
    // ... 其他属性和方法
    public $imageFile; // 用于存储上传文件的实例
    public function rules()
    {
        return [
            // ... 其他验证规则
            [['imageFile'], 'file', 'skipOnEmpty' => false, 'extensions' => 'png, jpg, jpeg', 'maxSize' => 1024 * 1024 * 2], // 2MB限制
        ];
    }
    // ... 其他方法
}

控制器逻辑（ArticleController.php）

在控制器中，处理表单提交并保存文件。

namespace app\controllers;
use Yii;
use yii\web\Controller;
use app\models\Article;
use yii\web\UploadedFile;
class ArticleController extends Controller
{
    // ... 其他方法
    public function actionUpdate($id)
    {
        $model = $this->findModel($id);
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            // 文件上传处理
            $imageName = time() . '.' . $model->imageFile->extension;
            $filePath = Yii::getAlias('@app/uploads/') . $imageName;
            if ($model->imageFile->saveAs($filePath)) {
                // 更新数据库中的图片路径
                $model->image = $imageName;
                $model->save(false); // 不需要再次验证
                return $this->redirect(['view', 'id' => $model->id]);
            }
        }
        return $this->render('update', [
            'model' => $model,
        ]);
    }
    // ... 其他方法
}

注意：

使用了 UploadedFile 类的 saveAs() 方法来保存文件到指定路径。
使用了 Yii::getAlias('@app/uploads/') 来获取上传目录的绝对路径，这里假设你已经在配置文件中定义了 @app/uploads 别名。
更新数据库中的图片路径字段（image）以反映新上传的图片文件名。

7.2.4.3 文件存储策略

文件存储策略是文件上传功能设计中的一个重要方面。在Yii2项目中，你可以根据实际需求选择不同的存储方案，如直接存储在服务器文件系统、使用云存储服务（如Amazon S3、阿里云OSS等）或数据库（尽管不推荐用于大文件）。

文件系统存储：如上例所示，文件直接保存在服务器的某个目录下。这种方式简单直接，但需要注意文件的安全性和备份问题。
云存储服务：对于需要高可用性和可扩展性的应用，使用云存储服务可能是一个更好的选择。Yii2提供了扩展或组件来支持多种云存储服务，你可以根据需求选择合适的扩展进行集成。
数据库存储：虽然理论上可以将文件内容直接存储在数据库中（如使用BLOB类型字段），但这通常不推荐用于大文件，因为这会显著增加数据库的大小和查询性能问题。