DropZone 事件不起作用 - 需要成功回调

Question

我正在使用 Dropzone 和 Laravel。目前图像正在上传到 S3。

但我需要知道一种方法，我可以知道文件上传何时完成，并让他们的 url 回来。

目前是这样的：（使用文档）

var token = "{!! csrf_token() !!}";
$("div#dropzoneFileUpload").dropzone({
    url: "/project/uploadImage",
    params: {
        _token: token
    }
});
Dropzone.options.dropzoneFileUpload = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    accept: function(file, done) {

    },
    init: function() {
        this.on("addedfile", function(file) {
            alert("Added file.");
        });
    }
};

添加文件时不发出任何警报，在事件方面似乎没有任何效果。

有帮助吗？

作为参考，这是我创建的 div：

<div class='dropzone' id='dropzoneFileUpload'></div>

Answer 1

首先您需要禁用 dropzone 自动发现，否则 dropzone 将使用默认选项加载。

其次，最好的办法可能是在初始化 dropzone 元素之前设置所有选项，或者在初始化本身中包含所有选项，但不要拆分它们，因为一旦 dropzone 元素被初始化，我认为这是不可能的更改选项。

要在上传完成后检索 url，一种方法是将 url 作为来自后端的响应发送回浏览器，然后您可以访问该响应使用 success 事件。

举个例子：

Dropzone.autoDiscover = false;

var token = "{!! csrf_token() !!}";

Dropzone.options.dropzoneFileUpload = {
    url: "/project/uploadImage",
    paramName: "file",
    maxFilesize: 2,
    params: {
        _token: token
    },
    init: function() {
        this.on("addedfile", function(file) {
            alert("Added file.");
        }),
        this.on("success", function(file, response) {
            console.log(response);
        })
    }
}

$('#dropzoneFileUpload').dropzone();

DropZone 事件不起作用 - 需要成功回调

DropZone events not working - need a success call back

jquery

image

dropzone.js

jquery-events