在从客户端 Jquery Laravel 上传之前预先调整多个图像的大小

所以，我没有帮助，但我设法通过使用 tweeks 解决了这个问题......我正在发布它们以便它可以帮助某人......谢谢

在这里，我选择图片并传递它以调整大小并将它们推入数组：

 $(document).on('change','#selectfile',function(){
            file_obj = this.files;
            pictures_array(file_obj);
    });

这里是用于调整大小并将其存储在数组中的函数，我在这里限制 ajax 函数运行，直到数组中的计数不等于具有某些验证的文件长度..：

function pictures_array(file_obj){
            var image_count = $('.sequence').length-1;
            count = file_obj.length;
            var new_count = image_count+count;
            
            console.log(image_count,new_count,count);
            if(new_count<=15){
            $('.ajax-loader').css("visibility", "visible");
            
            pictures = [];


            for(i=0; i<file_obj.length; i++) {
                var fileType = file_obj[i].type;
                var match = ['image/jpeg', 'image/png', 'image/jpg'];
                if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
                    var status='false';
                }
                resizeImages(file_obj[i],function(dataUrl){
                    var data = dataUrl;
                    pictures.push(data);
                    if(!--count) {
                        ajax(pictures);
                    }

                });

            }
            
            }else{
                $('#max_limit').html(15);
                $('#limit').show();
                $('html, body').animate({
                        scrollTop: $(".main-image").offset().top
                    }, 2000);
                $('#selectfile').val('');
                $('#selectfile1').val('');    
            }
}

这是ajax调用：我正在文件[]中使用for循环附加base64版本的图片：

function ajax(pictures) {
    // console.log(pictures);
    
    var image = new FormData();
    var pictures = pictures;
    for (var i = 0; i < pictures.length; i++) {
        image.append('file[]',pictures[i]);
    }


    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            // 'Content-Type': 'multipart/form-data',
        },
        url: "{{ route('images_private.store',$row->id) }}",
        type: "POST",
        data: image,
        cache: false,
        processData: false,
        contentType: false,
        datatype: 'html',
        beforeSend: function(){
                    $('.ajax-loader').css("visibility", "visible");
                },
                success:function(response) {
                    $('#selectfile').val('');
                    $('#selectfile1').val('');
                    $('#appendhtml').html(response);
                    // $('#appendhtml').load('#appendhtml');
                    setTimeout(function() {
                        toastr.options = {
                            closeButton: true,
                            progressBar: true,
                            showMethod: 'slideDown',
                            timeOut: 4000
                        };
                        toastr.success('Images uploaded successfully');
                    }, 1300);
                    $("#other-image-main").sortable({
                        cursor: 'move',
                        opacity: 0.6,
                        update: function() {
                            sendOrderToServer();
                        }
                    });

                },
                complete: function(){
                    $('.ajax-loader').css("visibility", "hidden");
                    $('#valid_image_type').hide();

                },
    });
}

然后是控制器中的最后一步：这里我将 base64 解码为 jpeg 文件并将其存储到服务器中：

if(!File::isDirectory($path)){

        File::makeDirectory($path, 0777, true, true);

    }
        if($request->has('file')){
        foreach ($request->file as $image){
            $position++;
            list($type, $image) = explode(';', $image);
            list(, $image)      = explode(',', $image);

            $image = base64_decode($image);

            $source_img = imagecreatefromstring($image);
            $filename= uniqid() . '.jpg';
            $filepath = $path.$filename ;
            $imageSave = imagejpeg($source_img, $filepath);
            
            ImagesPrivate::create([
                'user_id'=>$id,
                'owner_id'=>$auth,
                'name'=>$filename,
                'position'=>$position,
                'position_change'=>$position,
                'delete' => 'pending',
                ]);
            
        }
        }

所以，最后 4.8MB 的图片现在重 316KB 就成功了，，，

我发布这个是因为我还没有找到类似的东西，我花了一些时间来做到这一点，可能是我没有正确研究，但这就是我设法上传在客户端预先调整大小的多个图像而没有任何图像触发按钮...将上传时间减少到 90%...

希望对某人有所帮助 谢谢