README

为了正常运行，需要安装 Imagine 扩展程序 for Yii 2

安装

在 composer.json 中

"require": {
    "bubogumy/imageuploader": "dev-master"
}

在终端中 composer require bubogumy/imageuploader

配置

1. 在配置中添加到组件

    'imageUploader' => [
                'class' => 'bubogumy\imageService',
                'url' => '',
                'staticUrl' => 'https:///web',
                'baseUploadPath' => ''
            ],

1. 在所需控制器中，将我们的类重定向到我们的类 'upload' => 'bubogumy\UploadAction'

在所需方法中添加

    $model = new UserProfile();
    
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->goBack();
    }
    return $this->render('index', [
        'model' => $model,
    ]);

1. 创建我们的表模型，继承自 ActiveRecord，在特里特中连接 UploadTrait 并实现接口类 UploadInterface，描述事件。同时需要订阅事件。

2. 给目录权限创建文件夹。

3. 文件 clear-temp 自动清理 temp 文件夹。

使用示例

模型描述

namespace app\models;

use bubogumy\UploadInterface;
use bubogumy\UploadTrait;
use yii\db\ActiveRecord;  

/**
 * This is the model class for table "lang_data.user_profile".
 *
 * @property int $id
 * @property string $name
 * @property string $logo
 * @property string $logo_prev
 */
class UserProfile extends ActiveRecord implements UploadInterface
{
    use UploadTrait;

    public $filename;

    /**
     * @inheritdoc
     */
    public static function tableName()
    {
        return 'lang_data.user_profile';
    }

    /**
     * @inheritdoc
     */
    public function rules()
    {
        return [
            [['name', 'logo', 'logo_prev'], 'string', 'max' => 255],
        ];
    }

    /**
     * @inheritdoc
     */
    public function userFind()
    {
        UserProfile::find()
            ->all();
    }

    /**
     * @return array
     */
    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'name' => 'Name',
            'logo' => 'Logo',
            'logo_prev' => 'Logo Prev',
        ];
    }

    /**
     * ID пользователя
     *
     * @return int
     */
    public function getUserId()
    {
        return 1;
    }

    /**
     * Адрес до сурс картинки
     *
     * @return string
     */
    public function pathSettings()
    {
        return '/profile_logo/src/';
    }

    /**
     * @return bool
     */
    public function beforeUploadEvent()
    {
        return true;
    }

    /**
     * Адрес на превью картинку
     *
     * @return string
     */
    public function pathPreviewSettings()
    {
        return '/profile_logo/preview/';
    }

    /**
     * Атрибут сурс картинки
     *
     * @return string
     */
    public function attributeSettings()
    {
        return 'logo';
    }

    /**
     * Атрибут превью картинки
     *
     * @return string
     */
    public function attributePreviewSettings()
    {
        return 'logo_prev';
    }

    /**
     * Получение адреса из бд до сурса
     *
     * @return string
     */
    public function getFileSettings()
    {
        return $this->logo;
    }

    /**
     * Получение адреса из бд до превью
     *
     * @return string
     */
    public function getFilePreviewSettings()
    {
        return $this->logo_prev;
    }

    /**
     * Подпись на события
     */
    public function init()
    {
        $this->subscribeEvent();
        parent::init();
    }
}

在 index.php 中分配 $model = new bubogumy\UserProfile();
连接 jQuery 以处理 Ajax 请求
创建表单

    <form enctype="multipart/form-data" method="post" action="/site/upload" id="form">
        <input type="file" name="file">
        <input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken()?>" />
        <input type="submit" value="Загрузить" class="btn">
    </form>

添加 Ajax

    <script>
        $(function(){
            $('#form').on('submit', function(e){
                e.preventDefault();
                var $that = $(this),
                formData = new FormData($that.get(0));
                $.ajax({
                    url: $that.attr('action'),
                    type: $that.attr('method'),
                    contentType: false,
                    processData: false,
                    data: formData,
                    dataType: 'html',
                    success: function(form){
                        if(form){
                            $that.replaceWith(form);
                        }
                    }
                });
            });
        });
    </script>

为了显示预览和上传图片，添加

    <?php if (isset($fileUrl)) :?>
        <?php $form = ActiveForm::begin(['action' => ['index']]); ?>
            <img src="<?= $fileUrl ?>" height="100px">
            <?= $form->field($model, 'logo')->hiddenInput(['value' => $filename]) ?>
            <?= $form->field($model, 'logo_prev')->hiddenInput(['value' => $filename]) ?>
            <div class="form-group">
                <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
            </div>
        <?php ActiveForm::end(); ?>
    <?php endif; ?>