javascript 多个更新图像不显示在请求所有laravel

uqcuzwp8  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(123)

我正在使用dropzone.js上传多张图片。主要原因是使用户可以上传(拖放)多个图像。
对于上传(存储)图像,它工作正常,可以正常上传,但更新多个图像时有问题,当我dd请求所有没有值

返回多个图像,但只有从请求表单返回值。我已经尝试包含paramName = file,但仍然没有从file获得任何请求。
如何更新多个图像并获取请求值以存储在表中?
edit.blade.php

<script>
   let companyId = @json($companies);
    Dropzone.autoDiscover = false;
    document.addEventListener('DOMContentLoaded', function(e) {
        $(document).ready(function() {
            (function() {
                var myDropzone = new Dropzone("#multipleFileUpload", {
                    url: '/admin/company/update/' + companyId,
                    method: 'POST',
                    paramName: 'file',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    acceptedFiles: ".jpg,.png,.jpeg",
                    maxFiles: 999,
                    maxFilesize: 2,
                    addRemoveLinks: true,
                    uploadMultiple: false,
                    autoProcessQueue: false,
                    parallelUploads: 999,
                    dictCancelUpload: "Cancel",
                    dictDefaultMessage: "Please drag & drop images here",
                    timeout: 5000,
                    init: function() {
                        dzClosure =
                            this; // Makes sure that 'this' is understood inside the functions below.

                        // for Dropzone to process the queue (instead of default form behavior):
                        document.getElementById("submitButton").addEventListener(
                            "click",
                            function(e) {
                                // Make sure that the form isn't actually being sent.
                                e.preventDefault();
                                e.stopPropagation();
                                dzClosure.processQueue();
                            });

                        // send all the form data along with the files:
                        this.on("sendingmultiple", function(data, xhr, formData) {
                            formData.append("name", jQuery("#name")
                                .val());
                            formData.append("email", jQuery("#email")
                                .val());

                            formData.append("dropzone", jQuery(
                                    "#multipleFileUpload")
                                .val());

                            formData.append("file", document.getElementById(
                                'multipleFileUpload'));

                            formData.append("logo", document.getElementById(
                                'companyLogo').files[0]);

                            formData.append("phone_number", jQuery(
                                    "#phoneNumber")
                                .val());

                            formData.append("fax_number", jQuery("#faxNumber")
                                .val());

                            formData.append("address1", jQuery("#address1")
                                .val());

                            formData.append("address2", jQuery("#address2")
                                .val());

                            formData.append("city", jQuery("#city")
                                .val());

                            formData.append("postcode", jQuery("#postcode")
                                .val());

                            formData.append("state", jQuery("#state")
                                .val());

                            formData.append("country", jQuery("#country")
                                .val());

                            formData.append("longitude", jQuery("#longitude")
                                .val());

                            formData.append("latitude", jQuery("#latitude")
                                .val());
                        });
                    },
                    success: function(file, response) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Image added successfully',
                            confirmButtonText: 'Ok',
                        }).then(function() {
                            window.location.href =
                                "{{ route('admin.company.index') }}"
                        });
                    },
                    error: function() {
                        return false
                    },
                    init: function() {
                        var submitButton = document.querySelector("#submit");
                        myDropzone = this;
                        submitButton.addEventListener("click", function() {
                            myDropzone.processQueue();
                        });

                        this.on('complete', function() {
                            if (this.getQueuedFiles().length == 0 && this
                                .getUploadingFiles()
                                .length == 0) {
                                var _this = this;
                                _this.removeAllFiles();
                            }
                        });
                    }
                });
            })();
        });
    });

</script>

<div class="col-12 form-group">
                                            <div class="card">
                                                <div class="card-header">Image Upload</div>
                                                <div class="card-body">
                                                    <div class="dropzone" id="multipleFileUpload" name="dropzone">
                                                        @foreach ($companies->images as $image)
                                                            <div class="img-wrap">
                                                                <a href="#" onclick="deleteImage({{ $image->id }})"
                                                                    class="close btn-delete btn-image-delete"
                                                                    id="btn-delete"
                                                                    data-image-id={{ $image->id }}>&times;</a>
                                                                <img class="image-dropzone"
                                                                    src="{{ asset($image->location) }}" width="100px"
                                                                    height="100px" alt="image"
                                                                    style="background-position: center background-attachment: fixed;"
                                                                    data-image-id="{{ $image->id }}" name="images">
                                                            </div>
                                                        @endforeach
                                                        <input type="hidden" name="upload_image"
                                                            value="{{ $image->id }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
eh57zj3b

eh57zj3b1#

要上传多个,您需要将name属性设置为html元素中的数组。例如:name="images[]"在每个图像输入。

相关问题