将多个图像上载到Laravel5.8选择，并在发送到服务器之前进行特定删除

Question

我有一个问题，我无法获得一个特定的删除或删除输入文件上传。我实现了默认的html多个图像上传，不幸的是，如果我想通过具体的删除从数组列表的上传集合中删除任何图像，根据UI，它似乎工作得很好，因为我已经将数组中的所有图像都呈现出来了，同时也使用了按钮删除按钮。

问题:单击btn "Remove“将用户删除，然后图像就消失了，当我检查默认调试的dd()方法 from：action="{{ route('module.product.store') }}" I'v时，显示数组中的所有图像仍然出现。

*例如：*我上传了3张图片，然后从上传的数组中删除了2幅图像，在UI中只显示了1张图片，2张图片已经消失。我期望这个图像只有一个上传到服务器，但是当从表单中检索数据时，将得到数组中的3个条目。

HTML:刀片

 <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" />

对于每一幅被删除的图像