DropzoneJS中addedfile事件无法获取file.dataURL问题求助

嘿，我太懂你踩的这个坑了！你碰到的问题核心在于Dropzone触发addedfile事件的时机，早于dataURL的生成——这就是为啥你在事件里打印file.dataURL是undefined，但过一会儿在控制台又能拿到的原因！

问题原因拆解 #

当Dropzone触发addedfile时，它只是把选中的文件对象加入到上传队列里，但还没开始异步读取文件内容生成dataURL。你在控制台能拿到test.dataURL，是因为等你手动去查的时候，Dropzone已经完成了文件读取的异步操作，dataURL自然就存在了。

两种可行的解决方案 #

方案1：改用Dropzone的thumbnail事件

Dropzone专门提供了thumbnail事件，它会在文件缩略图（也就是dataURL）生成完成后触发，参数里直接就带了生成好的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') 
    } 
  }); 

  // 保留addedfile做其他初始化操作（比如显示loader）
  dropzone.on('addedfile', function(file) { 
    window.test = file; 
    $('#loader').show(); 
  }); 

  // 把设置src的逻辑移到thumbnail事件里
  dropzone.on('thumbnail', function(file, dataURL) { 
    document.getElementById('avatar').setAttribute('src', dataURL);
  });

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

方案2：手动用FileReader生成dataURL

如果你想更灵活控制文件读取的过程，也可以直接用原生的FileReader来手动读取文件生成dataURL，完全不依赖Dropzone的内部逻辑：

$(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; 
    $('#loader').show(); 

    // 手动读取文件生成dataURL
    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('avatar').setAttribute('src', e.target.result);
    };
    reader.readAsDataURL(file);
  }); 

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

验证效果 #

两种方案都能确保你在dataURL完全生成后再去设置图片的src，不会再出现undefined的情况。根据你的场景选一个就行，我个人更推荐方案1，毕竟是Dropzone原生提供的事件，更贴合它的工作流。

内容的提问来源于stack exchange，提问作者Petar Vasilev