開發與維運

基於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;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *