Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能

内容部分包含两个部分，首先是上传表单然后是隐藏的图片预览区域，我是从Dropzone官网下载的预览模板代码，在配置文件中使用这个模板告诉Dropzone哪段HTML用于上传图片预览。

4、Dropzone配置

查看完整的Dropzone配置项列表参考这里，对本项目来说我想从Dropzone一个一个上传文件，因为这样的话我就不需要循环遍历文件上传，并行上传文件数限制为100并且每个文件大小不能超过8M。

每个图片预览都对应一个删除链接，点击该链接Dropzone就会触发removedfile事件，该事件会创建上传/删除的Ajax请求，如果响应状态码是200，则对应图片计数器减少。

var photo_counter = 0;
Dropzone.options.realDropzone = {

    uploadMultiple: false,
    parallelUploads: 100,
    maxFilesize: 8,
    previewsContainer: '#dropzonePreview',
    previewTemplate: document.querySelector('#preview-template').innerHTML,
    addRemoveLinks: true,
    dictRemoveFile: 'Remove',
    dictFileTooBig: 'Image is bigger than 8MB',

    // The setting up of the dropzone
    init:function() {

        this.on("removedfile", function(file) {

            $.ajax({
                type: 'POST',
                url: 'upload/delete',
                data: {id: file.name},
                dataType: 'html',
                success: function(data){
                    var rep = JSON.parse(data);
                    if(rep.code == 200)
                    {
                        photo_counter--;
                        $("#photoCounter").text( "(" + photo_counter + ")");
                    }

                }
            });

        } );
    },
    error: function(file, response) {
        if($.type(response) === "string")
            var message = response; //dropzone sends it's own error messages in string
        else
            var message = response.message;
        file.previewElement.classList.add("dz-error");
        _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i];
            _results.push(node.textContent = message);
        }
        return _results;
    },
    success: function(file,done) {
        photo_counter++;
        $("#photoCounter").text( "(" + photo_counter + ")");
    }}

该配置文件底部如果上传成功图片计数器增加。

5、上传逻辑

我习惯将特定逻辑放到Repository类，在本项目中我使用 ImageRepository这个类，该类存放在app/Logic/Image/ImageRepository.php。

目前这个类只做两件事，上传单个文件以及删除指定文件，我们将整个Repository类注入到ImageController中：

<?php

namespace App\Http\Controllers;

use App\Logic\Image\ImageRepository;use Illuminate\Support\Facades\Input;

class ImageController extends Controller{
    protected $image;

    public function __construct(ImageRepository $imageRepository)
    {
        $this->image = $imageRepository;
    }

    public function getUpload()
    {
        return view('pages.upload');
    }

    public function postUpload()
    {
        $photo = Input::all();
        $response = $this->image->upload($photo);
        return $response;

    }

    public function deleteUpload()
    {

        $filename = Input::get('id');

        if(!$filename)
        {
            return 0;
        }

        $response = $this->image->delete( $filename );

        return $response;
    }}

因此对这个控制器而言我需要三个路由：显示上传表单，上传以及删除请求：

Route::get('/', ['as' => 'upload', 'uses' => 'ImageController@getUpload']);
Route::post('upload', ['as' => 'upload-post', 'uses' =>'ImageController@postUpload']);
Route::post('upload/delete', ['as' => 'upload-remove', 'uses' =>'ImageController@deleteUpload']);

ImageController的postUpload方法将用户上传请求转发到ImageRepository类对应的upload方法。这个upload方法首先会验证输入，然后为上传文件分配唯一的文件名，再然后保存原始尺寸图片到指定目录，同时将图标尺寸图片保存到其它目录，此外还要保存到数据库以便Laravel可以跟踪图片上传记录。为此我们需要创建迁移文件并运行迁移命令：

<?php

use Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;

class CreateImages extends Migration{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->text('original_name');
            $table->text('filename');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('images');
    }}

我已经提过了上传文件将会保存为两种尺寸，此外可能还要生成缩略图并对图片编码，要实现这些功能，我们需要使用Intervention Image扩展包：

<?php

namespace App\Logic\Image;

use App\Models\Image;use Illuminate\Support\Facades\Validator;use Illuminate\Support\Facades\Response;use Illuminate\Support\Facades\Config;use Illuminate\Support\Facades\File;use Intervention\Image\ImageManager;

class ImageRepository{
    public function upload( $form_data )
    {

        $validator = Validator::make($form_data, Image::$rules, Image::$messages);

        if ($validator->fails()) {

            return Response::json([
                'error' => true,
                'message' => $validator->messages()->first(),
                'code' => 400
            ], 400);

        }

        $photo = $form_data['file'];

        $originalName = $photo->getClientOriginalName();
        $originalNameWithoutExt = substr($originalName, 0, strlen($originalName) - 4);

        $filename = $this->sanitize($originalNameWithoutExt);
        $allowed_filename = $this->createUniqueFilename( $filename );

        $filenameExt = $allowed_filename .'.jpg';

        $uploadSuccess1 = $this->original( $photo, $filenameExt );

        $uploadSuccess2 = $this->icon( $photo, $filenameExt );

        if( !$uploadSuccess1 || !$uploadSuccess2 ) {

            return Response::json([
                'error' => true,
                'message' => 'Server error while uploading',
                'code' => 500
            ], 500);

        }

        $sessionImage = new Image;
        $sessionImage->filename      = $allowed_filename;
        $sessionImage->original_name = $originalName;
        $sessionImage->save();

        return Response::json([
            'error' => false,
            'code'  => 200
        ], 200);

    }

    public function createUniqueFilename( $filename )
    {
        $full_size_dir = Config::get('images.full_size');
        $full_image_path = $full_size_dir . $filename . '.jpg';

        if ( File::exists( $full_image_path ) )
        {
            // Generate token for image
            $imageToken = substr(sha1(mt_rand()), 0, 5);
            return $filename . '-' . $imageToken;
        }

        return $filename;
    }

    /**
     * Optimize Original Image
     */
    public function original( $photo, $filename )
    {
        $manager = new ImageManager();
        $image = $manager->make( $photo )->encode('jpg')->save(Config::get('images.full_size') . $filename );

        return $image;
    }

    /**
     * Create Icon From Original
     */
    public function icon( $photo, $filename )
    {
        $manager = new ImageManager();
        $image = $manager->make( $photo )->encode('jpg')->resize(200, null, function($constraint){$constraint->aspectRatio();})->save( Config::get('images.icon_size')  . $filename );

        return $image;
    }

    /**
     * Delete Image From Session folder, based on original filename
     */
    public function delete( $originalFilename)
    {

        $full_size_dir = Config::get('images.full_size');
        $icon_size_dir = Config::get('images.icon_size');

        $sessionImage = Image::where('original_name', 'like', $originalFilename)->first();


        if(empty($sessionImage))
        {
            return Response::json([
                'error' => true,
                'code'  => 400
            ], 400);

        }

        $full_path1 = $full_size_dir . $sessionImage->filename . '.jpg';
        $full_path2 = $icon_size_dir . $sessionImage->filename . '.jpg';

        if ( File::exists( $full_path1 ) )
        {
            File::delete( $full_path1 );
        }

        if ( File::exists( $full_path2 ) )
        {
            File::delete( $full_path2 );
        }

        if( !empty($sessionImage))
        {
            $sessionImage->delete();
        }

        return Response::json([
            'error' => false,
            'code'  => 200
        ], 200);
    }

    function sanitize($string, $force_lowercase = true, $anal = false)
    {
        $strip = array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "=", "+", "[", "{", "]",
            "}", "\\", "|", ";", ":", "\"", "'", "&#8216;", "&#8217;", "&#8220;", "&#8221;", "&#8211;", "&#8212;",
            "—", "–", ",", "<", ".", ">", "/", "?");
        $clean = trim(str_replace($strip, "", strip_tags($string)));
        $clean = preg_replace('/\s+/', "-", $clean);
        $clean = ($anal) ? preg_replace("/[^a-zA-Z0-9]/", "", $clean) : $clean ;

        return ($force_lowercase) ?
            (function_exists('mb_strtolower')) ?
                mb_strtolower($clean, 'UTF-8') :
                strtolower($clean) :
            $clean;
    }}

上传方法会验证Image模型中指定的字段规则，目前该规则只是限定上传图片的扩展。

在upload方法之后我们使用reateUniqueFilename方法为图片返回唯一文件名。

当唯一文件名返回后，我们将图片和对应文件名传递到original方法，该方法负责保存完整尺寸图片，对小尺寸图标图片我们使用icon方法进行处理。

这两个尺寸图片都保存好了之后，系统会在图片表images中创建一条新纪录。

你可能已经注意到了我将图片上传目录存放在了配置文件中，当然你可以自定义存放目录或者直接使用Laravel内置的方法。

<?php

return [
    'full_size'   => env('UPLOAD_FULL_SIZE'),
    'icon_size'   => env('UPLOAD_ICON_SIZE'),
];

要让应用正常工作还需要将.env.example文件拷贝到.env文件，并且设置相应的配置值。注意到最后两个配置项的上传目录需要以/结尾，以我本地配置为例：

UPLOAD_FULL_SIZE=F:/xampp/htdocs/nonfu/dropzone-laravel-image-upload/public/images/full_size/
UPLOAD_ICON_SIZE=F:/xampp/htdocs/nonfu/dropzone-laravel-image-upload/public/images/icon_size/

删除方法接收文件名并检查数据库中是否包含，然后在对应文件在是否存在于指定目录，如果两项都符合则该图片会被删除。

想要更加轻松地使用DropzoneJS实现图片上传，可以使用Laravel扩展包Dropzoner。

声明：本文为译文，原文：https://tuts.codingo.me/laravel-5-1-and-dropzone-js-auto-image-uploads-with-removal-links