Yii 實作圖片上傳與縮略圖自動生成功能完整教學

前言

在 Web 應用開發中，圖片上傳與縮略圖生成是常見需求。本文將詳細介紹如何利用 Yii 框架實現圖片上傳功能，並在上傳成功後自動生成指定尺寸的縮略圖，提供完整的程式碼範例供開發者參考。

核心控制器實作

首先建立 TestController，包含縮略圖生成、圖片列表顯示與檔案上傳三個核心 Action：

1. 縮略圖生成 Action

<?php
class TestController extends CController {

    /**
     * 縮略圖片生成
     * @param string $path 圖片路徑
     * @param int $w 圖片寬度
     * @param int $h 圖片高度
     */
    public function actionGetThumb($path, $w, $h) {
        $file_name = md5($path . $w . $h);
        
        // 若縮略圖已存在，直接導向
        if (file_exists('./temp/' . $file_name . '.jpg')) {
            header('location:/temp/' . $file_name . '.jpg');
            Yii::app()->end();
        }
        
        // 使用 EPhpThumb 擴展生成縮略圖
        Yii::import("ext.EPhpThumb.EPhpThumb");
        $thumb = new EPhpThumb();
        $thumb->init();
        $thumb->create('.' . $path)
              ->adaptiveResize($w, $h)
              ->save('./temp/' . $file_name . '.jpg')
              ->show();
    }

2. 圖片列表顯示 Action

    /**
     * 圖片顯示列表
     */
    public function actionList() {
        $attache = Attache::model();
        $list = $attache->findAll();
        $this->render('list', array('list' => $list));
    }

3. 檔案上傳 Action

    /**
     * 檔案上傳處理
     */
    public function actionIndex() {
        $path = getcwd() . 'uploads';
        $dir = DIRECTORY_SEPARATOR . date('Y') . DIRECTORY_SEPARATOR . date('m');
        $dir = str_replace("\\", "/", $dir);
        $uploads_dir = str_replace("\\", "/", $path . $dir);
        
        // 自動建立上傳目錄
        if (!is_dir($uploads_dir) || !is_writeable($uploads_dir)) {
            mkdir($uploads_dir, 0777, TRUE);
            touch($uploads_dir . '/index.html');
        }
        
        $uploaded = false;
        $model = new Upload();
        
        if (isset($_POST['Upload'])) {
            $model->attributes = $_POST['Upload'];
            $file = CUploadedFile::getInstance($model, 'file');
            
            // 生成唯一檔名：MD5(副檔名 + 微秒時間戳) 取前17碼
            $newName = substr(md5($file->extensionName . round((microtime(true) * 1000))), 0, 17) . '.' . $file->extensionName;
            $file_name = $uploads_dir . '/' . $newName;
            
            if ($model->validate()) {
                $attache = new Attache();
                $uploaded = $file->saveAs($file_name, TRUE);
                $attache->name = $file->getName();
                $attache->path = $dir . '/' . $newName;
                $attache->create_time = time();
                $attache->save();
            }
        }
        
        $this->render('index', array(
            'model' => $model,
            'uploaded' => $uploaded,
            'dir' => $uploads_dir,
        ));
    }
}

模型驗證類

簡單的表單模型，僅驗證上傳檔案類型：

<?php
class Upload extends CFormModel {
    public $file;

    public function rules() {
        return array(
            array('file', 'file', 'types' => 'jpg, gif, png, zip'),
        );
    }
}

視圖檔案實作

圖片列表視圖 (list.php)

自訂縮略圖尺寸，透過 createUrl 動態生成縮略圖 URL：

<?php foreach ($list as $v): ?>
    <img src="<?php echo Yii::app()->createUrl('test/getThumb', array('path' => '/uploads' . $v['path'], 'w' => '150', 'h' => '150')) ?>">
<?php endforeach; ?>

上傳表單視圖 (index.php)

<?php if($uploaded):?>
<p>File was uploaded. Check <?php echo $dir ?>.</p>
<?php endif ?>

<?php echo CHtml::beginForm('','post',array('enctype'=>'multipart/form-data'))?>
    <?php echo CHtml::error($model, 'file')?>
    <?php echo CHtml::activeFileField($model, 'file')?>
    <?php echo CHtml::submitButton('Upload')?>
<?php echo CHtml::endForm()?>

關鍵技術點總結

• 目錄結構：按年/月自動建立上傳目錄，避免單一目錄檔案過多
• 檔名唯一性：採用 MD5(副檔名 + 微秒時間) 確保不重複
• 縮略圖快取：以路徑+尺寸為 Key 的 MD5 做為檔名，避免重複生成
• EPhpThumb 擴展：支援自適應裁切、等比縮放等多種模式
• 資料庫記錄：上傳成功後寫入 Attache 模型，便於後續管理

此實作提供了完整的圖片上傳與縮略圖解決方案，可直接應用於 Yii 專案中，並可根據業務需求擴展支援更多圖片處理功能。