基于laravel-admin图片批量定时上传

简介: 基于laravel-admin图片批量定时上传

前端代码:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{ trans('admin.upload') }}</h3>
    </div>
    <div class="panel-body">
        <form action="" method="post" class="form-horizontal excel-upload-form"
              enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="inputFile" class="col-sm-3 control-label">上传文件:</label>
                <div class="col-sm-7">
                    <input type="file" name="file" class="file" multiple data-show-upload="false">
                </div>
                @if($errors->any())
                    <div class="col-sm-9 col-sm-offset-3" style="color: red;padding-top: 10px;">
                        <i class="fa fa-info-circle"></i> {{ $errors->first() }}
                    </div>
                @endif
            </div>

            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <div class="btn-group">
                        <button type="submit" class="btn btn-primary"><i class="fa fa-upload"></i> 导入数据</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>

    $(function () {

        //文件上传初始化
        $('.file').fileinput({
            language: 'zh',
            browseLabel: '浏览',
            cancelLabel: '取消',
            removeLabel: '删除',
            initialPreviewAsData: true,
            allowedFileExtensions: ['xls', 'xlsx', 'png', 'jpg', 'gif', 'jpeg']
        });

        $('form').on('submit', function (e) {

            e.preventDefault();

            $(this).find('button[type="submit"]').prop('disabled', true).empty().html('<i class="fa fa-spinner fa-pulse"></i> 保存中...');
            //获取上传文件对象
            var files = $('.file')[0].files;
            //给对象添加slice()方法
            files = Array.prototype.slice.call(files);
            //length上传文件数量 result新构建数组 limit每次取文件数量
            var length = files.length,
                result = [],
                limit = 5;
            //没有选择上传文件提示
            if (length === 0) {
                swal('请选择上传图片!', '', 'error');
                $.pjax.reload('#pjax-container');
                return false;
            }
            //创建FormData数据对象
            var data = new FormData();

            data.append('_token', $('input[name="_token"]').val());
            //以limit长度分割数组
            for (var i = 0; i < length; i += limit) {
                result.push(files.slice(i, i + limit));
            }
            //以key为键 取result数组值
            var key = 0,
                count = result.length;
            //第一次上传
            ajaxFunc();
            //第一次后定时上传
            var id = setInterval(imgUpload, 5000);

            function ajaxFunc() {
                //删除FormData数据对象里值
                data.delete('img[]');
                //将result[key]里的每个文件写入img数组
                for (var j = 0; j < result[key].length; j++) {

                    data.append('img[]', result[key][j]);
                }
                //上传文件接口
                var url = '';

                $.ajax({
                    url: url,
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        key++;
                        if (key === count) {
                            //取消定时器
                            clearInterval(id);
                            swal(res.msg, '', 'success');
                            $.pjax.reload('#pjax-container');
                        }
                    }
                });
            }

            function imgUpload() {

                if (key < count) {
                    ajaxFunc();
                } else {
                    clearInterval(id);
                    swal('导入凭证完毕!', '', 'success');
                    $.pjax.reload('#pjax-container');
                }
            }
        });
    })
</script>

后端代码:

public function upload(Request $request)
    {
        if ($request->isMethod('post')) {
            if (!$request->hasFile('img')) {
                $arr = [
                    'success' => true,
                    'msg' => '选择需要导入的图片文件!'
                ];
                admin_toastr('选择需要导入的图片文件!', 'error');
                return $arr;
            }

            $imgDatas = $request->file('img');

            $slug = 'upload/voucher/' . date('Y') . '/';

            foreach ($imgDatas as $imgData) {
                if (!$imgData->isValid()) continue;

                $path = $slug . $imgData->getClientOriginalName();

                if (file_exists(public_path($path))) {
                    Storage::disk('admin')->delete($path);
                }
                $res = Storage::disk('admin')->putFileAs($slug, $imgData, $imgData->getClientOriginalName());
            }

            if ($res) {
                $arr = [
                    'success' => true,
                    'msg' => '导入图片成功!'
                ];
                admin_toastr('导入图片成功!', 'success');
            } else {
                $arr = [
                    'success' => false,
                    'msg' => '导入图片失败!'
                ];
                admin_toastr('导入图片失败!', 'error');
            }

            return $arr;
        } else {
            $arr = [
                'success' => false,
                'msg' => '请求错误!'
            ];
            admin_toastr('请求错误!', 'error');
        }

        return $arr;
    }
目录
相关文章
hutool工具随机获得列表中的一定量的不重复元素,返回Set
hutool工具随机获得列表中的一定量的不重复元素,返回Set
hutool工具随机获得列表中的一定量的不重复元素,返回Set
|
7月前
|
人工智能 编解码 算法
AI生成视频告别剪辑拼接!MAGI-1:开源自回归视频生成模型,支持一镜到底的长视频生成
MAGI-1是Sand AI开源的全球首个自回归视频生成大模型,采用创新架构实现高分辨率流畅视频生成,支持无限扩展和精细控制,在物理行为预测方面表现突出。
822 1
AI生成视频告别剪辑拼接!MAGI-1:开源自回归视频生成模型,支持一镜到底的长视频生成
|
前端开发 JavaScript
js截取相应的域名----正则匹配法 和校验Url 正则表达式
js截取相应的域名----正则匹配法 和校验Url 正则表达式 用javascript截取相应的域名方法两种,供大家参考 1.方法1: [javascript] view plain copy function domainURI(str){...
4383 0
|
9月前
|
Ubuntu Linux
Ubuntu Linux
背景 Ubuntu起源于南非,其名称“Ubuntu”来源于非洲南部祖鲁语或豪萨语,意为“人性”、“我的存在是因为大家的存在”,这体现了非洲传统的一种价值观。Ubuntu由南非计算机科学家马克·沙特尔沃斯(Mark Shuttleworth)创办,他创立了Canonical公司来推动Ubuntu的发展。Ubuntu的第一个版本于2004年发布,至今已经走过了近20个年头,成为了Linux发行版中的佼佼者。
258 4
Ubuntu Linux
|
12月前
|
存储 数据可视化
如何高效构建团队知识库?试试看板工具
团队知识管理是提升工作效率的关键。知识管理专家Tiago Forte提出的“第二大脑”概念,强调通过收集、整理、提炼和表达四步法,将零散信息转化为系统知识。教你如何用看板工具构建团队知识库。
280 0
如何高效构建团队知识库?试试看板工具
|
存储 Oracle 关系型数据库
【赵渝强老师】执行Oracle的冷备份与冷恢复
本文介绍了数据库的冷备份与冷恢复技术,包括其定义、优缺点及操作步骤。通过Oracle RMAN工具,详细演示了如何执行冷备份和冷恢复,确保数据库在关闭状态下完成备份,并能快速恢复到指定时间点。文中还提供了具体的操作示例和代码,帮助读者更好地理解和实践。
368 0
|
存储 设计模式 前端开发
【C++并发编程】std::future、std::async、std::packaged_task与std::promise的深度探索(二)
【C++并发编程】std::future、std::async、std::packaged_task与std::promise的深度探索
335 0
|
应用服务中间件 持续交付 nginx
[nginx]借助nginx实现自动获取本机IP
[nginx]借助nginx实现自动获取本机IP
259 5
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的公司员工工作日志办公系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的公司员工工作日志办公系统的详细设计和实现(源码+lw+部署文档+讲解等)
204 1
|
算法 Linux
交换分区swap的创建与管理
交换分区swap的创建与管理
260 0