Question

我正在以编程方式开发dropzone js。这是我的div，

<div class="dropzone" id="my-dropzone"> 
    <div class="dz-message">
        <div class="col-xs-8">
            <div class="message">
                <p>Drop files here or Click to Upload</p>
            </div>
        </div>
    </div>
    <div class="fallback">
        <input type="file" name="file" multiple>
    </div>
</div>

和rpzone类是 // Dropzone类：

var myDropzone = new Dropzone("div#my-dropzone", { url: "/file/post"});

但是当我将图像拖放到放置区域框时，图像中带有十字符号的预览（不是成功上传）。那我该如何解决这个问题呢？ dropzone.confif.js

var total_photos_counter = 0;
Dropzone.options.myDropzone = {
    uploadMultiple: true,
    parallelUploads: 2,
    maxFilesize: 5,
    previewTemplate: document.querySelector('#preview').innerHTML,
    addRemoveLinks: true,
    dictRemoveFile: 'Remove file',
    dictFileTooBig: 'Image is larger than 16MB',
    timeout: 10000,

    init: function () {
        this.on("removedfile", function (file) {
            $.post({
                url: '/images-delete',
                data: {id: file.name, _token: $('[name="_token"]').val()},
                dataType: 'json',
                success: function (data) {
                    total_photos_counter--;
                    $("#counter").text("# " + total_photos_counter);
                }
            });
        });
    },
    success: function (file, done) {
        total_photos_counter++;
        $("#counter").text("# " + total_photos_counter);
    }
};

Answer 1

经过长时间的花费后找到解决方案。问题是{{csrf_field（）}}未在我的div标签中进行配置，首先将其添加到以下部分的主刀片模板中：

<meta name="csrf-token" content="{{ csrf_token() }}">

，然后将dropzone.config.js文件配置为csrf

Dropzone.options.myDropzone = {
    uploadMultiple: true,
    parallelUploads: 2,
    maxFilesize: 16,
    previewTemplate: document.querySelector('#preview').innerHTML,
    addRemoveLinks: true,
    dictRemoveFile: 'Remove file',
    dictFileTooBig: 'Image is larger than 16MB',
    timeout: 10000,

    init: function () {
        this.on("removedfile", function (file) {
            $.post({
                url: '/images-delete',
                data: {id: file.name, _token: $('[name="_token"]').val()},
                dataType: 'json',
                success: function (data) {
                    total_photos_counter--;
                    $("#counter").text("# " + total_photos_counter);
                }
            });
        });
    },
    success: function (file, done) {
        total_photos_counter++;
        $("#counter").text("# " + total_photos_counter);
    },

    sending: function(file, xhr, formData){
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
    }
};

现在使用正确的网址可以正常工作

DropZone.js上传无法以编程方式进行

1 个答案: