Welcome to

Mr.Xiong

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

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

将以下代码放置你要进行上传的页面,别忘记改 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,谢谢大家的阅读!祝每天开心~
版权声明:本文为博主原创文章,未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

2 条回应 “Laravel 结合 HDJS 插件完成图片上传”
  1. 老饼 2018年3月23日 on 上午9:39 回复

    给个建议,这个deemo主要是逻辑内容,可以把不必要的样式代码,布局代码去掉会变得更加简明清晰

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

雄心勃勃但谦卑温逊!

>> <<