Vue Dropzone 2手动入队文件报错：this.$refs.dropzone.enqueueFile不是函数

嘿，我之前用Vue Dropzone 2开发上传功能时也踩过这个坑！你遇到的报错原因其实很清晰：你通过this.$refs.dropzone拿到的是Vue组件的实例，而不是原生的Dropzone对象，enqueueFile是原生Dropzone实例上的方法，直接调用自然会提示“不是函数”。

核心解决方案 #

要调用原生Dropzone的方法，得先从Vue组件实例里拿到原生Dropzone对象——它挂载在组件的dropzone属性上，之后再执行对应的方法即可。另外因为你设置了autoProcessQueue: false，入队后还要手动触发队列处理才能开始上传。

修正后的startUpload方法 #

startUpload() {
  // 获取原生Dropzone实例
  const dropzoneInstance = this.$refs.dropzone.dropzone;
  // 遍历已接受文件并手动入队
  dropzoneInstance.getAcceptedFiles().forEach(f => dropzoneInstance.enqueueFile(f));
  // 手动启动队列处理，触发上传
  dropzoneInstance.processQueue();
}

额外优化提示 #

你的removeFile方法也可能存在同样的问题，建议同步修正：

removeFile(file) {
  const dropzoneInstance = this.$refs.dropzone.dropzone;
  // 调用原生方法删除文件
  dropzoneInstance.removeFile(file);
  // 同步更新本地文件列表
  this.addedFiles = this.addedFiles.filter(item => item.uid !== file.uid);
}

注意点 #

• 确保调用这些方法时，Dropzone组件已经完成挂载（比如你的startUpload是按钮点击触发，属于用户交互场景，不会有挂载未完成的问题）
• 确认Vue Dropzone 2和依赖的Dropzone.js版本兼容，原生方法的可用性由Dropzone.js版本决定

内容的提问来源于stack exchange，提问作者Ewomazino Ukah