文章模块——文章添加图片处理组件

1.下载文章添加图片处理组件

• 进入composer包管理源

      地址：https://packagist.org

• 搜索：intervention/image

      下载地址：http://image.intervention.io/getting_started/installation
      需要开启的配置：php: >=5.4.0
                    fileinfo
                    gd2

• 下载执行命令：

      f:\xampp\php\php.exe composer.phar require intervention/image

• 执行composer自动加载类

      f:\xampp\php\php.exe composer.phar dump-autoload

2.修改项目配置文件

• 修改config/app.php配置文件

     //providers服务提供者中添加
    'providers' => [Intervention\Image\ImageServiceProvider::class,]

     //facades门面中添加
    'aliases' => ['Image' => Intervention\Image\Facades\Image::class]

3.使用图片处理组件

• 引入图片处理类Image

      use Intervention\Image\Facades\Image;

• 先获取上传的文件

    //文章图片上传
    public function upload(Request $request)
    {
        //获取上传文件
        $file = $request->file('photo');
     }

• 判断文件是否上传成功

        //判断上传文件是否成功,如果文件是无效的，则给客户端返回ServerNo为400，ResultData为无效的上传文件
        if (!$file->isValid()) {
            return response()->json(['ServerNo' => '400', 'ResultData' => '无效的上传文件']);
        }

• 如果文件上传成功，获取原文件的扩展名

        //获取原文件的扩展名
        $ext = $file->getClientOriginalExtension();

• 定义上传文件后的新文件名

        //新文件名：md5加密，时间函数，100至999的三位随机数，拼接上原文件的扩展名
        $newfile = md5(time() . rand(1000, 9999)) . '.' . $ext;

• 定义文件上传后的路径

        //文件上传的指定路径
        $path = public_path('uploads');

• 使用上传图片处理类来保存文件

        //make()(上传的文件)->resize()(缩放的大小)->save()(保存上传后文件的路径)(public/uploads/新文件名)
        $res = Image::make($file)->resize(100, 100)->save($path . '/' . $newfile);

• 判断上传保存是否成功，给客户端响应状态

        if ($res) {
            //如果上传文件成功
            return response()->json(['ServerNo' => '200', 'ResultData' => $newfile]);
        } else {
            //如果上传文件失败
            return response()->json(['ServerNo' => '400', 'ResultData' => '文件上传失败']);
        }

4.客户端接收返回的数据

    <script>
        layui.use(['form', 'layer'], function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            var upload = layui.upload;
            //选中上传按钮test1时触发的click单击事件
            $('#test1').on('click',function() {
                //选中上传图片选择框photo_upload的click单击事件：
                $('#photo_upload').trigger('click');
                //选中上传图片选择框photo_upload的change改变内容事件：
                $('#photo_upload').on('change',function() {
                    var obj = this;
                    //设置一个空对象formData，用来保存id为art_form的异步提交数据表单
                    var formData = new FormData($('#art_form')[0]);
                    $.ajax({
                        //提交的路由
                        url: '/admin/article/upload',
                        //提交方式
                        type: 'post',
                        //提交的数据(因为data值是FormData对象，不需要对数据做处理)
                        data: formData,
                        //处理数据：不需要
                        processData:false,
                        //发送数据的格式:关闭
                        contentType:false,
                        //请求成功返回的数据
                        success:function(data){
                            //如果返回的data数组的键ServerNo等于200
                            if (data['ServerNo']=='200') {
                                //选中id为art_thumb_img的元素，追加元素的src属性，和值'/uploads/'+data['ResultData']
                                $('#art_thumb_img').attr('src','/uploads/'+data['ResultData']);
                                //将返回的data数据的值给名为art_thumb的输入框input
                                $('input[name=art_thumb]').val(data);
                                //当obj内容改变后，关闭
                                $(obj).off('change');                                
                            }else{
                                //如果失败，弹出返回的data数组的键ResultData的值
                                alert(data['ResultData']);
                            }
                        },
                        //出现错误
                        error:function(XMLHttpRequest,textStatus,errorThrown){
                            var number = XMLHttpRequest.status;
                            var info = "错误号"+number+"文件上传失败！";
                            //将菊花换成原图
                            //$('#pic').attr('src','file.png');
                            alert(info);
                        },
                        //$.ajax执行后，会继续执行ajax后面的脚本
                        async:true
                    });                   
                });               
            });