Bootstrap Markdown结合dropZone快速上传图片

Bootstrap Markdown结合dropZone实现快速上传图片

image description

Bootstrap Markdown结合dropZone快速上传图片

Bootstrap Markdown工具,此处不做过多说明,有不会的自行百度或参考下官网例子,Bootstrap Markdown官网,这个很简单,引入其必要的css及js文件,即可完成markdown编辑器的搭建。此篇文章只介绍dropZone的插件使用,包括前后端的操作。

本文以laravel框架为例

首先先去dropZone官网下载对应的css及js文件

  • dropZone传送门,这边可能会有个问题,dropZone的css文件在其官网上并没有直接提供出来,需要我们自己去拉取,打开官网首页,鼠标右键,查看页面源代码或者按快捷键V,这时我们会看到一个dropzone.css的文件的链接,打开后,全选保存其内容,在自己本地新建一个css文件即可。

  • 将对应的文件引入到代码中,因为我用的是laravel框架,这里面的一些写法会以laravel为准,最终引入文件结果如下:


    <link rel="stylesheet" type="text/css" href="{{asset('markdown/css/bootstrap-markdown.min.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{asset('/css/drp.css')}}" />

    ......

    <script type="text/javascript" src="{{asset('markdown/js/markdown.js')}}"></script>
    <script type="text/javascript" src="{{asset('markdown/js/to-markdown.js')}}"></script>
    <script type="text/javascript" src="{{asset('markdown/js/bootstrap-markdown.js')}}"></script>
    <script type="text/javascript" src="{{asset('markdown/js/bootstrap-markdown.zh.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/dropzone.js')}}"></script>

  • 前端代码布局如下:

    <form class="form-horizontal" role="form" method="POST" action="{{ url('/article') }}" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">

        <div class="form-group">
            <label for="content" class="col-md-2 control-label">
                内容
            </label>
            <div class="col-md-10">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Markdown文本编辑器</h5>
                    </div>
                    <div class="ibox-content">
                        <textarea name="content" data-provide="markdown-editable" rows="14" id="content">{{ $content }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
             <div class="form-group">
                 <div class="col-md-10 col-md-offset-2">
                     <button type="submit" class="btn btn-primary btn-lg">
                          <i class="fa fa-disk-o"></i>
                              保存
                     </button>
                     <button type="button" class="btn btn-default btn-lg" onclick="back_btn()">
                         <i class="fa fa-reply-all"></i>
                             返回
                     </button>
                </div>
            </div>
        </div>
    </form>
  • 前端js代码如下:

    var u = "{{url('/uploads/markdown_image')}}";
    $('#content').markdown({
        autofocus:true,
        iconlibrary: 'fa',
        language:'zh',
        dropZoneOptions: {//Bootstrap Markdown集成的dropZone插件调用
            paramName:'markdownImage',//上传的图片name值
            maxFilesize: 4,//M
            uploadMultiple:false,
            createImageThumbnails:true,//是否生成图像的缩略图
            url:u,
        }
    });

后端处理

  • 添加路由Route::post('/uploads/markdown_image', 'MarkdownController@uploads');
  • 上传图片处理

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;
    use Validator;
    use App\Http\Requests;
    use App\Image\ImageRepository;

    class MarkdownController extends Controller
    {
        public function __construct($path = 'markdown/')
        {
            $this->date = date('Y-m-d', time());
            if(isWindows()){
                $this->upload_path = public_path().config('blog.uploads.webpath').'/'.$path.$this->date.'/'; 
            }else{
                $this->upload_path = config('blog.base_size_path').$path.$this->date.'/';
            }
            $this->call_back_path = config('blog.uploads.webpath').'/'.$path.$this->date.'/';
        }

        /**
         *
         * 上传图片
         * @param  ImageRepository $imageRepository [description]
         * @param  Request         $request         [description]
         * @return [type]                           [description]
         */
        public function uploads(ImageRepository $imageRepository,Request $request){
            $validator = $this->validator($request->input());

            if ($validator->fails()) {
                return '仅支持上传png,gif,jpeg,jpg格式的图片';
            }

            if($request->hasFile('markdownImage')){
                $img = $request->file('markdownImage');
                checkdir($this->upload_path);
                $info = $imageRepository->uploadSingle($img,$this->upload_path);

                $img_info = $this->call_back_path.$info;
            }else{
                $img_info = '没有上传文件,请联系管理员!';
            }

            return $img_info;
        }

        /**
         * 验证上传的图片信息
         * @param  array  $data [description]
         * @return [type]       [description]
         */
        public function validator(array $data){

            $validator = Validator::make($data, [
                'markdownImage' => 'mimes:png,gif,jpeg,jpg'
            ]);
            return $validator;
        }
    }

其中涉及到的图片上传类,此处不做过多说明,具体的请查看文章laravel图片上传类,本处只贴下针对markdown的图片处理方法,如下:


    /**
     * 适用于Markdown编辑器上传图片以及其他单图上传类
     * @param  [type] $photo       [description]
     * @param  [type] $upload_path [description]
     * @param  [type] $w_h_size    [description]
     * @return [type]              [description]
     */
    public function uploadSingle($photo,$upload_path,$w_h_size=array()){
        
        $originalName = $photo->getClientOriginalName();
        //取得图片的后缀
        $pfix = $photo->getClientOriginalExtension();
        $originalNameWithoutExt = substr($originalName, 0, strlen($originalName) - 4);
        $filename = sanitize($originalNameWithoutExt);
        //自定义图片名称(路径随意选择一个尺寸即可,每个尺寸下的图片名称都是一样的)
        $pic_name = createUniqueFilename($upload_path,$filename,$pfix);

        $filenameExt = $pic_name .'.'.$pfix;

        //原图(等上传完毕,会删除此图)
        $original_pic = Image::make( $photo )->save($upload_path.'normal_'.$filenameExt);

        $origi_w = $original_pic->width();
        $origi_h = $original_pic->height();

        if(!empty($w_h_size)){
            $w = $w_h_size[0];
            $h = $w_h_size[1];
        }else{
            //默认
            $w = 1000;
            $h = 600;
        }

        $new_w_h = getNewPicWH($w,$h,$origi_w,$origi_h);
        $image = Image::make($original_pic)
                    ->resize($new_w_h[0],$new_w_h[1])
                    ->save($upload_path.$filenameExt );
        if($image){
            $filenameInfo = $filenameExt;//返回的图片信息
            //上传成功,删除最开始的原始图
            unlink($upload_path.'normal_'.$filenameExt);//删除原始图
        }else{
            $filenameInfo = '网络或其他原因导致上传失败,请重试!';
        }
        return $filenameInfo;
    }

最终上传成功后的效果图如下:

description

END