Upload ảnh lên server là 1 vấn đề đâu đầu với mọi lập trình viên .Câu hỏi làm sao người dùng up đúng dữ liệu ảnh,làm sao mình có thể lấy link ảnh đó lưu vào database .Hôm nay mình sẽ làm 1 ví dụ nho nhỏ hướng dẫn các bạn các bước nhé

Bước 1 : Tạo cơ sở dữ liệu lưu ảnh gồm id ,images lưu link ảnh và alt lưu nội dung ảnh

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Dec 26, 2016 at 11:34 PM
-- Server version: 10.1.16-MariaDB
-- PHP Version: 5.6.24

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

--
-- Database: `demoyii2`
--

-- --------------------------------------------------------

--
-- Table structure for table `images`
--

CREATE TABLE `images` (
  `id` int(11) NOT NULL,
  `images` text NOT NULL,
  `alt` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `images`
--
ALTER TABLE `images`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `images`
--
ALTER TABLE `images`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Tiếp theo chúng ta đến phần models kết nối với database bằng file Images.php trong mục commom với rules như sau

return [
            [['images', 'alt'], 'required'],
            //[['images'], 'string'],
            [['alt'], 'string', 'max' => 500],
        	['images','safe'],
                ['images', 'file', 'extensions' => 'jpg,jpeg, gif, png,jpeg,bmp'],
        		
        ];

Comment lại đonạ images string thay nó bằng file bạn nhớ để file và extensions là các đuôi về ảnh nhé .Chỗ này tránh người dùng cố ý up shell lên server chúng ta

Tiếp theo trong models Images đó chúng ta tạo 1 function upload()

public function upload()
	{
		if ($this->validate()) {
			$alias = \Yii::getAlias('@frontend');
			$link_khong_dau = Images::move_dau($this->images->baseName).'-'.(String)time();
			$path = $alias.'/web/uploads/user';
			FileHelper::createDirectory($path);
			$this->images->saveAs($path.'/'. $link_khong_dau. '.' . $this->images->extension);
			$path_save_db ='/uploads/user/'. $link_khong_dau. '.' . $this->images->extension;
			$models_image = new Images();
			$models_image->images = $path_save_db;
			$models_image->alt = $this->alt;
			$models_image->save();
			return true;
		} else {
			return false;
		}

Để xử lý vấn đề tạo thư mục bạn có thể tạo trước hoặc  dùng FIleHelper như mình để tạo .Nếu như chúng ta là người nước ngoài thì ok rồi nhưng chúng ta thường lưu ảnh bằng tiếng việt nên cần chuyển ảnh up lên từ có dấu sang không dấu với function move_dau()

public function move_dau($str)
	{
		$str = preg_replace("/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/", 'a', $str);
		$str = preg_replace("/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/", 'e', $str);
		$str = preg_replace("/(ì|í|ị|ỉ|ĩ)/", 'i', $str);
		$str = preg_replace("/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/", 'o', $str);
		$str = preg_replace("/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/", 'u', $str);
		$str = preg_replace("/(ỳ|ý|ỵ|ỷ|ỹ)/", 'y', $str);
		$str = preg_replace("/(đ)/", 'd', $str);
		$str = preg_replace("/(À|Á|Ạ|Ả|Ã|Â|Ầ|Ấ|Ậ|Ẩ|Ẫ|Ă|Ằ|Ắ|Ặ|Ẳ|Ẵ)/", 'A', $str);
		$str = preg_replace("/(È|É|Ẹ|Ẻ|Ẽ|Ê|Ề|Ế|Ệ|Ể|Ễ)/", 'E', $str);
		$str = preg_replace("/(Ì|Í|Ị|Ỉ|Ĩ)/", 'I', $str);
		$str = preg_replace("/(Ò|Ó|Ọ|Ỏ|Õ|Ô|Ồ|Ố|Ộ|Ổ|Ỗ|Ơ|Ờ|Ớ|Ợ|Ở|Ỡ)/", 'O', $str);
		$str = preg_replace("/(Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ)/", 'U', $str);
		$str = preg_replace("/(Ỳ|Ý|Ỵ|Ỷ|Ỹ)/", 'Y', $str);
		$str = preg_replace("/(Đ)/", 'D', $str);
		$str = str_replace(" ", "-", str_replace("&*#39;","",$str));
		return $str;
	}

Giờ thì ok rồi đó .Tiếp theo chúng ta sẽ đến phần controller với file ImagesControllers trong phần frontend nội dung actionCreate()

public function actionCreate()
    {
        $model = new Images();
		
        if ($model->load(Yii::$app->request->post())) {
        	$model->images = UploadedFile::getInstance($model, 'images');
        	if ($model->upload())
			{
        		return $this->redirect('index');
			}
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }

Chúng ta sẽ lấy dữ liệu $model->images = UploadedFile::getInstance($model, ‘images’); đầu vào chưa xử lý thông qua việc $models->uploads() sẽ biến link ảnh thành không dấu và lưu vào folder uploads/user

Còn ở  file views chúng ta cần biến đổi 1 chút như sau

<?php $form = ActiveForm::begin(['id'=>'images_upload','options' => ['enctype'=>'multipart/form-data']]); ?>

    <?= $form->field($model, 'images')->fileInput() ?>

    <?= $form->field($model, 'alt')->textInput(['maxlength' => true]) ?>

Các bạn nhớ thêm ‘options’ => [‘enctype’=>’multipart/form-data’] để form có thể upload dạng media lên nhé và images sẽ nhận dữ liệu dạng fileInput()

Ok vây là xong giờ xem thành quả nhé

Link demo : http://demo.hbsprogram.com/images/index .

Bạn nghĩ sao về việc upload ảnh trong yii2 ? Dễ hay khó .Hãy cho mình biết ý kiến của bạn về việc upload ảnh lên server trong yii2 nhé .Sẽ thật tuyệt vời hơn nếu chia sẻ bài viết này đến bạn bè .