基于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;
    }
目录
相关文章
针对FastAdmin新增上传多个图片,新增上传的视频的预览效果
针对FastAdmin新增上传多个图片,新增上传的视频的预览效果
657 0
|
4天前
|
前端开发 JavaScript Java
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显(一))
这篇文章详细介绍了在SpringBoot+Vue项目中实现表单和图片上传的完整流程,包括前端上传、后端接口处理、数据库保存图片路径,以及前端图片回显的方法,同时探讨了图片资源映射、token验证、过滤器配置等相关问题。
|
4天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
关系型数据库 MySQL API
PHP定时任务:轮询多个API接口并将内容自动录入mysql数据库的解决方案
PHP定时任务:轮询多个API接口并将内容自动录入mysql数据库的解决方案
90 0
|
SQL 关系型数据库 MySQL
漏刻有时导入数据layUI上传提示“请求上传接口出现异常”的解决方案
漏刻有时导入数据layUI上传提示“请求上传接口出现异常”的解决方案
134 0
|
消息中间件 监控 NoSQL
crowd-admin2.2.0版本发布啦,支持演示模式,接入cdn提升响应速度,新增echart图表展示
crowd-admin2.2.0版本发布啦,支持演示模式,接入cdn提升响应速度,新增echart图表展示
73 0
|
前端开发 数据库
eggjs 怎么实现更新用户信息接口去更新上传头像信息?
eggjs 怎么实现更新用户信息接口去更新上传头像信息?
149 0
 eggjs 怎么实现更新用户信息接口去更新上传头像信息?
|
PHP 计算机视觉
yii2.0上传图片的时候如何实现自动压缩?
yii2.0上传图片的时候如何实现自动压缩?
267 0
|
JavaScript 前端开发 Shell
详解如何在npmjs上上传和更新属于自己的组件库(下)
详解如何在npmjs上上传和更新属于自己的组件库
282 0
详解如何在npmjs上上传和更新属于自己的组件库(下)