Dropzone.js调用querySelector报错：file.querySelector不是函数的解决咨询

嘿，这个坑我之前踩过！你误解了Dropzone里complete事件回调中file对象的类型——它不是直接的预览DOM元素，而是Dropzone封装的一个自定义File对象，包含了文件的元数据、状态以及关联的DOM元素引用。

问题原因 #

Dropzone手册里提到的“预览DOM的引用”，其实是挂载在这个自定义file对象的previewElement属性上，而非file对象本身就是DOM节点。所以直接调用file.querySelector()自然会报错，因为这个方法只有DOM元素才具备。

修复后的代码 #

把你的代码改成这样，通过file.previewElement获取到真正的DOM节点后再调用querySelector：

myDropzone.on("complete", function(file) {
  if(file.status === 'success') {
    // 先拿到对应的预览DOM元素
    const previewElement = file.previewElement;
    // 再调用querySelector访问子节点
    console.log(previewElement.querySelector('.file-status'));
  }
});

额外小提示 #

为了让代码更健壮，你可以先判断previewElement是否存在，避免意外报错：

myDropzone.on("complete", function(file) {
  if(file.status === 'success' && file.previewElement) {
    console.log(file.previewElement.querySelector('.file-status'));
  }
});

这样就能正确访问到预览元素里的目标子节点啦！

内容的提问来源于stack exchange，提问作者Samik Sengupta