来自Android浏览器的图像上传问题-基于LARAVEL的APP

Question

Large size Images get uploaded without problem from Laptop but not From Mobile Browser. It gets Loading and the validator returns error saying img required

Js Code

    // Variable to store your files
    var files;
    // Add events
    $('#image').on('change', prepareUpload);
    // Grab the files and set them to our variable
    function prepareUpload(event){
      files = event.target.files;
    }
    $('#se_enregister').on('click', function uploadFiles(event){
    // Catch the form submit and upload the files
        event.stopPropagation(); // Stop stuff happening
        event.preventDefault(); // Totally stop stuff happening
        if(!files){
            $('#errors').html('');
            $('#errors').append('<label class="label-danger">L\'image est obligatoire</label><br>')
        }else{
            // START A LOADING SPINNER HERE
            // Create a formdata object and add the files
            var data = new FormData();
            data.append('image', files[0]);
            data.append('name', $('input[name=name]').val());
            data.append('email', $('#email').val());
            data.append('tel', $('input[name=tel]').val());
            data.append('sex', $('input[name=sex]:checked').val());
            data.append('age', $('input[name=age]').val());
            data.append('ville', $('#ville').val());
            data.append('password', $('#password').val());
            data.append('password_confirmation', $('input[name=password_confirmation]').val());
            // data.append('image1', $('#image').val());
            // console.log(data)
            $.ajax({
                url: '/register_user',
                type: 'POST',
                data: data,
                cache: false,
                dataType: 'json',
                processData: false, // Don't process the files
                contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                xhr: function(){
                    //upload Progress
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener('progress', function(event) {
                            $('#loading_screen').css({
                                opacity: 1,
                                visibility: 'visible',
                                'z-index': 500,
                            });
                            var percent = 0;
                            var position = event.loaded || event.position;
                            var total = event.total;
                            if (event.lengthComputable) {
                                percent = Math.ceil(position / total * 100);
                            }
                            //update progressbar
                            // $(progress_bar_id +" .progress-bar").css("width", + percent +"%");
                            // $(progress_bar_id + " .status").text(percent +"%");
                            console.log(percent)
                            $('#loading_screen .percentage').html('chargement '+percent+' %');
                        }, true);
                    }
                    return xhr;
                },
                success: function(data)
                { 
                    // alert(data.responseText)
                    $('#ssss').trigger('click')
                    window.location = '/shop_category'; 
                },
                error: function(data){
                    // alert(data.responseText)
                            $('#loading_screen').css({
                                opacity: 0,
                                visibility: 'hidden',
                                'z-index': -1,
                            });
                    if (data.responseText == "nice") {
                        window.location = '/shop_category'; 
                    $('#ssss').trigger('click')
                    }else{
                        var errors = data.responseJSON;
                        if(errors['name']){
                            $('div[data-obj="name"] .help-block strong').html(errors['name']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="name"] .help-block strong').html('')
                        }
                        if(errors['email']){
                            $('div[data-obj="email"] .help-block strong').html(errors['email']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="email"] .help-block strong').html('')
                        }
                        if(errors['tel']){
                            $('div[data-obj="tel"] .help-block strong').html(errors['tel']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="tel"] .help-block strong').html('')
                        }
                        if(errors['sex']){
                            $('div[data-obj="sex"] .help-block strong').html(errors['sex']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="sex"] .help-block strong').html('')
                        }
                        if(errors['age']){
                            $('div[data-obj="age"] .help-block strong').html(errors['age']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="age"] .help-block strong').html('')
                        }
                        if(errors['adresse']){
                            $('div[data-obj="adresse"] .help-block strong').html(errors['adresse']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="adresse"] .help-block strong').html('')
                        }
                        if(errors['password']){
                            $('div[data-obj="password"] .help-block strong').html(errors['password']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="password"] .help-block strong').html('')
                        }
                        if(errors['password_confirmation']){
                            $('div[data-obj="password_confirmation"] .help-block strong').html(errors['password_confirmation']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="password_confirmation"] .help-block strong').html('')
                        }
                        if(errors['image']){
                            $('div[data-obj="image"] .help-block strong').html(errors['image']).css('white-space', 'nowrap');
                        }else{
                            $('div[data-obj="image"] .help-block strong').html('')
                        }
                    }
                }
            });
        }
    })

PHP code

 function register_user(Request $data){

    $validator = $this->validate($data, [
        'name' => 'required|max:255',
        'email' => 'required|email|max:255|unique:users',
        'tel' => 'required|unique:users',
        'ville' => 'required',
        'sex' => 'required',
        'image' => 'required|mimes:jpg,jpeg,bmp,png|max:5120',
        'password' => 'required|min:6|confirmed',
    ],
    $messages = [
        'required' => 'le champ :attribute est obligatoire',
        'image.required' => 'Photo de profile est obligatoire',
        'tel.unique' => 'le :attribute a déjà été pris',
        'password.required' => 'le champ Mot de passe est obligatoire',
    ]);

    $user = new User();
        $user->name = $data['name'];
        $user->email = $data['email'];
        $user->tel = $data['tel'];
        $user->age = $data['age'];
        $user->sex = $data['sex'];
        $user->password = bcrypt($data['password']);
        $user->save();


        $img_name = $user->id.'.'.$data->file('image')->extension();
        // intervention image
        $extension = $data->file('image')->extension();
        $data->file('image')->move(public_path('/images/users/'), $img_name);
        $user->link = '/images/users/'.$img_name;
        $user->save();




    $adresse = new adresse();
    $adresse->ville = $data['ville'];
    $adresse->user_id = $user->id;
    $adresse->save();
    $user->save();

    Auth::login($user, true);

    // $img = Image::make(public_path('images/users/'.$img_name));

    $img = Image::make(public_path('images/users/'.$img_name))
                    ->resize(300, 300,function ($constraint) {$constraint->aspectRatio();})
                    ->resizeCanvas(300, 300,'center', false, 'rgba(0, 0, 0, 0)');

    $img->save(public_path('/images/users/'.$user->id.'.png'));

    $user->link = '/images/users/'.$user->id.'.png';
    $user->save();
    File::delete(public_path('/images/users/'.$img_name));

    return 'nice';
}

The problem don't appear for small size images...

PS : After the image upload it gets optimized by Intervention/image

Answer 1

Most likely your max upload file size is set around 2-3MB by default in PHP. Try adding the following lines to public/.htaccess to boost the POST max size and max file size to 15MB (or change the number to desired limit)

php_value upload_max_filesize 15M
php_value post_max_size 15M

The reason for the error is the limit has essentially prevented the image from uploading.