DropzoneJS dataURL 未定义答案

【问题标题】：DropzoneJS dataURL is undefinedDropzoneJS dataURL 未定义
【发布时间】：2018-10-25 07:57:38
【问题描述】：

我正在制作一个上传脚本，但我一直在“addfile”事件中从“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);

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

这是记录到控制台的“文件”的屏幕截图：

【问题讨论】：

记录文件时得到什么对象？确保您正确访问 dataURL 字段
该对象被称为“文件”，它有 dataURL 作为属性@VincentNguyen
能否贴一张记录到控制台的文件对象截图
我对dropzoneJS不熟悉，但是addedfile似乎是异步的（我是这么认为的，因为截图显示了一个http请求）。因此，您可能会尝试在 dataUrl 可用之前访问它。看看这里的解决方案是否有帮助：stackoverflow.com/questions/25927381/…
@VincentNguyen 你是对的，在文档dropzonejs.com/#event-thumbnail 中也有说明

标签： javascript file-upload image-uploading dropzone.js

【解决方案1】：

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

你可以这样做：

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

【讨论】：