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

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

一、总结

一句话总结：

【在网上找hdjs的使用实例】和【能遇见讲hdjs的视频】，也是完全搞懂hdjs的不错的方式

1、hdjs中的filesLists函数的作用是什么？

提供选择以往上传文件的功能，后台需要返回文件列表数据

2、hdjs中的filesLists方法中的$files = glob('uploadImages/*/*');，也就是从uploadImages目录中找文件，那么lavarel该如何配置？

在config/filesystems.php中配置文件上传到uploadImages

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

二、laravel 框架使用hdjs 实现多图上传功能

转自或参考：laravel 框架使用hdjs 实现多图上传功能
https://blog.csdn.net/zgb4687199/article/details/81987198

 

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' => []];
    }
}

多图上传

<style>
    #box img {
        width: 200px;
        float: left;
        margin-right: 10px;
        border: solid 1px #999;
        padding: 10px;
        height: 200px;
    }
</style>
<button onclick="upImageMul(this)" class="btn btn-default" type="button">选择图片</button>
{{--注意这里有隐藏域用来发送图片地址--}}
<input type="hidden" name="pic" value="" id="pic">
<div id="box"></div>
<script>
    require(['hdjs']);
    //上传图片
    function upImageMul(obj) {
        require(['hdjs'], function (hdjs) {
            hdjs.image(function (images) {
            var pic = '';
                $(images).each(function (k, v) {
                    $("<img src='" + v + "'/>").appendTo('#box');
                })
                //将pic最后的逗号去掉
                pic = pic.substr(0,pic.length - 1);
                $('#pic').val(pic);
            }, {
                //上传多图
                multiple: true,
            })
        });
    }
</script>