DropzoneJS dataURL未定义

Question

我正在制作一个上传脚本但我仍然坚持从“addedfile”事件中的“file”获取dataURL，这是我的代码：

$(function() {

    var dropzone = new Dropzone('#avatar', {
        url: '/uploads/avatar',
        clickable: '.upload',
        maxFilesize: 5,
        maxFiles: 1,
        previewsContainer: false,
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    dropzone.on('addedfile', function(file) {
        window.test = file;
        document.getElementById('avatar').setAttribute('src', file.dataURL);
        $('#loader').show();
    });

    dropzone.on('success', function(file, result) {
        $('#avatar_url').val(result.url);
        $('#loader').hide();
    });
});

执行以下脚本行时：

document.getElementById('avatar').setAttribute('src', file.dataURL);

图像的src属性变为未定义，如果我控制日志file.dataURL它也未定义但控制台日志只是“文件”正确记录对象;但是，当我进入浏览器控制台并执行此操作时：

console.log(test.dataURL);

它正确输出数据网址，我可以成功使用它。

以下是登录到控制台的“文件”的屏幕截图：

Answer 1

缩略图是异步生成的，这意味着在发出 dataURL 事件时尚未生成 addedfile。生成缩略图时会发出一个 thumbnail event，将 dataURL 值作为第二个参数传递。

你可以这样做：

dropzone.on('thumbnail', function(file, dataURL) {
    document.getElementById('avatar').setAttribute('src', dataURL);
});

Answer 2

将以下内容添加到您的代码中... 虽然，我仍然没有正确的解释，但我会做我的研究并回来......

dropzone.on("sending", (file, xhr, formData) => {
    console.log(file.dataURL);
    formData.append("images", file.size);
})