Laravel 结合 HDJS 插件完成图片上传

• 作者: Mr.Xiong
• 日期: 2018年3月22日
• 分类: Laravel
• Tags: HDJS, 上传, 路由
• 阅读量: 4,508

将以下代码放置你要进行上传的页面，别忘记改 name 值，代码来源于 HDJS。

<div class="form-group">
    <label for="" class="col-sm-2 control-label">预览图</label>
    <div class="col-sm-10">
        <div class="input-group">
            <input class="form-control" name="preview" readonly="" value="node_modules/hdjs/dist/static/image/nopic.jpg">
            <div class="input-group-btn">
                <button onclick="upImagePc(this)" class="btn btn-default" type="button">选择图片</button>
            </div>
        </div>
        <div class="input-group" style="margin-top:5px;">
            <img src="{{asset('node_modules/hdjs/dist/static/image/nopic.jpg')}}" class="img-responsive img-thumbnail" width="150">
            <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
                onclick="removeImg(this)">×</em>
        </div>
    </div>
    <script>
        require(['hdjs']);
        //上传图片
        function upImagePc() {
            require(['hdjs'], function (hdjs) {
                var options = {
                    multiple: false,//是否允许多图上传
                };
                hdjs.image(function (images) {
                    //上传成功的图片，数组类型
                    $("[name='preview']").val(images[0]);
                    $(".img-thumbnail").attr('src', images[0]);
                }, options)
            });
        }

        //移除图片
        function removeImg(obj) {
            $(obj).prev('img').attr('src', '../dist/static/image/nopic.jpg');
            $(obj).parent().prev().find('input').val('');
        }
    </script>
</div>

图片地址可以为：

<img src="/node_modules/hdjs/dist/static/image/nopic.jpg"...

也可以使用 {{asset('node_modules/hdjs/dist/static/image/nopic.jpg')}} 生成，区别在于 asset 函数可以生成带有 http 的地址，并且指向 public 目录。

<img src="{{asset('node_modules/hdjs/dist/static/image/nopic.jpg')}}"...

修改配置项 config/filesystems.php ，在 disks 数组中增加如下代码，这样 attachment 就会在 public 目录下面生成，因为 storage_path() 会指向 storage 目录，不在 public 目录下不便于访问。

'attachment' => [
   'driver' => 'local',
   'root' => 'attachment',
],

建立后台控制器配合 HDJS 上传。

php artisan make:controller Component/UploadController

建立【uploader】和【filesLists】方法：

public function uploader(Request $request)
{
   $upload = $request->file;
   //可以查看$upload的方法，比如获得大小，类型等...
   //$arr  = get_class_methods($upload);
   //dd($arr);

   //判断是否上传成功
   if($upload->isValid()){
      $path = $upload->store(date('ymd'),'attachment');
      return ['valid'=>1,'message'=>asset('attachment/' . $path)];
   }
   return ['valid'=>0,'message'=>'上传失败'];
}

配置路由，因不属于后台，直接在 routes/web.php 配置即可。

Route::any('/component/uploader', 'Component\UploadController@uploader');
Route::any('/component/filesLists', 'Component\UploadController@uploader');

更改 master.blade.php 中的 HDJS 配置：

<script>
    window.hdjs={};
    //组件目录必须绝对路径(在网站根目录时不用设置)
    window.hdjs.base = '{{asset("node_modules/hdjs")}}';
    //上传文件后台地址
    window.hdjs.uploader = '{{asset("/component/uploader")}}';
    //获取文件列表的后台地址
    window.hdjs.filesLists = '{{asset("/component/filesLists")}}?';
</script>

在使用图片上传插件时，总会遇到一些坑，下面奉献两张上传成功的截图，祝你好运~

Finally，谢谢大家的阅读！祝每天开心~
版权声明：本文为博主原创文章，未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏