laravel 框架使用hdjs 实现单图上传功能

1. GitHub克隆hdjs
2. 配置
   
   代码如下：

'upload' => [
            'driver' => 'local',
            'root' => 'uploadImages',
        ],

<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
    window.hdjs={};
    //组件目录必须绝对路径
    window.hdjs.base = 'hdjs';
    //上传文件后台地址
    window.hdjs.uploader = '/upload?';
    //获取文件列表的后台地址
    window.hdjs.filesLists = '/filesLists?';
</script>
<script src="hdjs/require.js"></script>
<script src="hdjs/config.js"></script>

如果在Laravel等框架中使用组件，需要在标签中添加以下代码，这样可以实现框架的CSRF表单令牌验证。

<meta name="csrf-token" content="{{csrf_token()}}">

在route/web.php中添加上传方法路由

//上传图片路由
Route::any('/upload', 'UploadController@upload');
//已经上传路由图片地址
Route::any('/filesLists','UploadController@filesLists');

后台脚本
在app/http/Controllers创建UploadController类

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    //
    public function upload(Request $request){
        $file = $request->file('file');
        if ($file->isValid()){
            $path = $file->store(date('ymd'),'upload');
            return ['file' => asset('/uploadImages/' . $path), 'code' => 0];
        }
    }
    /**
     *传提供选择以往上传文件的功能，后台需要返回文件列表数据
     * 获取已经上传图片数据
     * @return array
     */
    public function filesLists(){
        $files = glob('uploadImages/*/*');
        foreach ($files as $f) {
            $file   = asset($f);
            $data[] = [
                'url'        => $file,
                'path'       => $file,
                'size'       => filesize($f),
                'name'       => basename($f),
                'createtime' => date('Y-m-d', filemtime($f)),
            ];
        }
        return ['data' => $data,'code'=>0, 'page' => []];
    }
}

单图上传

<div class="col-sm-8">
    <div class="input-group mb-1">
        <input class="form-control  form-control-sm" name="thumb" readonly="" value="">
        <div class="input-group-append">
            <button onclick="upImagePc(this)" class="btn btn-secondary" type="button">单图上传</button>
        </div>
    </div>
    <div style="display: inline-block;position: relative;">
        <img src="../image/nopic.jpg" class="img-responsive img-thumbnail" width="150">
        <em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
            onclick="removeImg(this)">×</em>
    </div>
</div>
<script>
    require(['hdjs','bootstrap']);
    //上传图片
    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>