Загрузка нескольких изображений в Laravel 5.8 Выберите и выберите конкретное удаление перед отправкой на сервер.

Question

У меня проблема с тем, что я не могу получить конкретное удаление или удаление из загрузки входного файла. Я реализовал стандартную загрузку нескольких изображений в формате html, к сожалению, если я хочу удалить какие-либо изображения из коллекции загрузок списка массивов с помощью спецификаций удаления, в соответствии с пользовательским интерфейсом это выглядит хорошо, потому что я отрисовал все изображения из массива для отображения с помощью кнопки удалить какхорошо.

Проблема: Пользователь удален нажатием btn «Удалить», после чего изображение исчезло, Когда я проверяю сообщение из формы с отладкой по умолчанию, вызванной laravel dd () метод из: action="{{ route('module.product.store') }}" Мне кажется, что все изображения в массиве все еще появляются.

* Например: * Я загрузил 3 изображения изатем я удалил 2 изображения из загруженного массива, в пользовательском интерфейсе отображаются только 1 изображения и 2 изображения исчезли. Я ожидал, что изображение всего лишь 1 загрузка на сервер, но при извлечении данных из формы POST получить 3items в массиве.

HTML: Blade

 <form method="post" action="{{ route('module.product.store') }}" autocomplete="on" method="POST" enctype="multipart/form-data">
    <div class="card-body">
        @csrf
        {{method_field('PUT')}}
        @include('partials.notification')
        <div class="uploader-files before-preview"> 
            <img relative-src="-log-upload.png" class="upload-file-icon" data-hook="upload-file-icon" src="-log-upload.png">

            <div class="upload-wrapper">
                <div class="fileUpload  btn btn-primary margin-none">
                    <span>Upload Image</span>
                    <input title="@DES_ImageBanner()" id="uploadFile"  required id="uploadBtn" multiple name="images[]" type="file" class="upload" />
                </div>
            </div>
        </div>
    </div>

    <div class="card-footer">
        <button type="submit" class="btn btn-fill btn-success">{{ __('Save') }}</button>
    </div>
</form>

jQuery:

$( document ).ready(function() {
        function imagesPreview(input, placeToInsertImagePreview)
        {   
            if (input.files) {
                var filesAmount = input.files.length;

                // console.log(filesAmount);
                var arrayCollection = [];
                $.each(input.files, function( index, value ) {
                    // console.log(value)
                    arrayCollection.push(value);
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        console.log(index);
                        $(".current-preview").append("<div id='img-wrapper-"+index+"'> <img class='col-lg-3' src='"+event.target.result+"'> <button class='remove-"+index+"' type='button'> Remove </button> </div>");
                        $(".remove-"+index).click(function(){
                            $(this).parent('#img-wrapper-'+index).remove();
                        });
                    }
                        // console.log(input.files[i]);
                    reader.readAsDataURL(arrayCollection[index]);
                });
            }
        }

        $('#uploadFile').on('change', function() {
            imagesPreview(this, '.current-preview');
        });
    });

Laravel: dd () Метод

array:3 [▼
  0 => UploadedFile {#273 ▼
    -test: false
    -originalName: "961339_616747031754013_1312921563_n.jpg"
    -mimeType: "image/jpeg"
    -error: 0
    #hashName: null
    path: "/tmp"
    filename: "phpAe4uNh"
    basename: "phpAe4uNh"
    pathname: "/tmp/phpAe4uNh"
    extension: ""
    realPath: "/tmp/phpAe4uNh"
    aTime: 2019-11-10 11:27:02
    mTime: 2019-11-10 11:27:02
    cTime: 2019-11-10 11:27:02
    inode: 1058393
    size: 119469
    perms: 0100600
    owner: 33
    group: 33
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
  }
  1 => UploadedFile {#283 ▼
    -test: false
    -originalName: "10331570_616745628420820_1275369630_n.jpg"
    -mimeType: "image/jpeg"
    -error: 0
    #hashName: null
    path: "/tmp"
    filename: "php2uA2ka"
    basename: "php2uA2ka"
    pathname: "/tmp/php2uA2ka"
    extension: ""
    realPath: "/tmp/php2uA2ka"
    aTime: 2019-11-10 11:27:02
    mTime: 2019-11-10 11:27:02
    cTime: 2019-11-10 11:27:02
    inode: 1058394
    size: 141129
    perms: 0100600
    owner: 33
    group: 33
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
  }
  2 => UploadedFile {#284 ▼
    -test: false
    -originalName: "10342661_616752931753423_1911417730_n.jpg"
    -mimeType: "image/jpeg"
    -error: 0
    #hashName: null
    path: "/tmp"
    filename: "phpdQpDS2"
    basename: "phpdQpDS2"
    pathname: "/tmp/phpdQpDS2"
    extension: ""
    realPath: "/tmp/phpdQpDS2"
    aTime: 2019-11-10 11:27:02
    mTime: 2019-11-10 11:27:02
    cTime: 2019-11-10 11:27:02
    inode: 1058395
    size: 137034
    perms: 0100600
    owner: 33
    group: 33
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
  }
]

Пожалуйста, помогите, спасибо

Answer 1

Вы должны удалить эту строку

<input title="@DES_ImageBanner()" id="uploadFile"  required id="uploadBtn" multiple name="images[]" type="file" class="upload" />

для каждого удаленного изображения