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

• 作者: Mr.Xiong
• 日期: 2018年6月11日
• 分类: ThinkPHP
• Tags: HDJS, TP5, 上传
• 阅读量: 4,723

一、安装配置 HDJS

执行命令安装 HDJS 前端组件库于我们的 TP5 项目当中。

npm install --save hdjs

安装完毕后，项目根目录中生成【node_modules】目录，将此目录移动到 【public/static】下即可。

接着进行配置，需在后台公共父级模板当中进行配置如下代码：

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

二、使用 HDJS 上传处理之图片上传(单图上传)

在需要做上传功能的后台模板文件当中部署如下代码：

<div class="col-sm-10">
    <div class="input-group">
        <input class="form-control" name="thumb" readonly="" value="">
        <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="../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,//是否允许多图上传
                //data是向后台服务器提交的POST数据
                data: {name: '后盾人', year: 2099},
            };
            hdjs.image(function (images) {
                //上传成功的图片，数组类型
                $("[name='thumb']").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>

效果如下：

三、建议组件控制器完成上传

执行命令进行创建组件控制器：

php think make:controller system/Component --plain

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

//上传
public function uploader()
{
   // 获取表单上传文件 例如上传了001.jpg
   $file = request()->file('file');
   // 移动到框架应用根目录/public/uploads/ 目录下
   $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
   if ($info) {
      $data = [
         'name' => input('post.name'),
         'filename' => $info->getFilename(),
         'path' => 'uploads/' . $info->getSaveName(),
         'extension' => $info->getExtension(),
         'createtime' => time(),
         'size' => $info->getSize(),
      ];
      Db::name('core_attachment')->insert($data);
      //index.php处理UP_ROOT
      echo json_encode(['valid' => 1, 'message' => UP_ROOT . 'uploads/' . $info->getSaveName()]);
      exit;
   } else {
      // 上传失败获取错误信息
      echo json_encode(['valid' => 0, 'message' => $file->getError()]);
      exit;
   }
}

 

//获取文件列表
public function filesLists()
{
   $db = Db::name('core_attachment')
      ->order('uid desc');
   $Res = $db->paginate(32);
   $data = [];
   if ($Res->toArray()) {
      foreach ($Res as $k => $v) {
         $data[$k]['createtime'] = date('Y/m/d', $v['createtime']);
         $data[$k]['size'] = $v['size'];
         //UP_ROOT在index.php声明
         $data[$k]['url'] = UP_ROOT . $v['path'];
         $data[$k]['path'] = UP_ROOT . $v['path'];
         $data[$k]['name'] = $v['name'];
      }
   }
   echo json_encode(['data' => $data, 'page' => $Res->render() ?: '']);
   exit;
}

注：以上代码中常量 UP_ROOT 在 index.php 当中声明，常量值为网站域名。

四、修改 HDJS 配置

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

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

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

赞赏

微信赞赏支付宝赞赏