Dropzone方法API速查表removeFile、processQueue、displayExistingFile一网打尽【免费下载链接】dropzoneDropzone is an easy to use dragndrop library. It supports image previews and shows nice progress bars.项目地址: https://gitcode.com/gh_mirrors/dr/dropzoneDropzone 是一款开箱即用的 HTML5 拖拽上传库drag drop library支持图片预览和漂亮的上传进度条。刚上手时新手最容易卡住的地方不是初始化而是「初始化之后还能做什么」——移除文件、手动触发上传、回显服务器已有文件……这些都要靠 Dropzone 的实例方法 API 来完成。本文用通俗的语言带你一网打尽最常用的方法并附上一张速查表方便随用随查。一张表看懂常用方法在深入细节之前先给全体方法拍张全家福。你可以根据自己当前的问题直接跳转阅读方法一句话说明典型场景removeFile(file)移除单个文件上传中则先取消上传完成后自动清除预览removeAllFiles(true)清空列表可选取消正在进行的上传重置按钮processQueue()手动处理上传队列用户点确认后才开始上传processFile(file)手动上传指定文件精细控制单个文件displayExistingFile()回显服务器上的已有文件编辑页展示历史上传cancelUpload(file)取消某个文件的上传上传中途叫停disable()/enable()停用 / 恢复整个 Dropzone表单切换只读状态getQueuedFiles()等按状态筛选文件列表统计、校验文件数量removeFile优雅地移除单个文件当文件加入 Dropzone 后它就是一个file对象。想把它从列表里移除调用removeFile(file)即可。这个方法的细节很贴心如果文件正在上传它会先调用cancelUpload(file)中断请求再移除移除后触发removedfile事件方便你在预览图上做动画或联动 UI当列表被清空时还会额外触发reset事件上传区自动恢复初始提示状态。最经典的用法是上传完成即自动清理myDropzone.on(complete, function (file) { myDropzone.removeFile(file); });源码实现只有十几行但事件处理滴水不漏参见 dropzone.ts。removeAllFiles一键清空列表removeAllFiles(cancelIfNecessary)用于批量移除文件。注意默认行为正在上传中的文件不会被移除以保证数据安全。如果确实要连上传一起取消传入truemyDropzone.removeAllFiles(true);这个参数非常适合重置按钮。相关实现见 dropzone.ts。processQueue把上传的发令枪握在自己手里默认情况下autoProcessQueue为true文件一入队就自动开始上传。但很多业务希望先展示、后上传——让用户勾选、确认再点开始上传按钮。这时把autoProcessQueue设为false文件入队后只会安静地排队等你准备好手动调用processQueue()即可批量发射。它内部会检查parallelUploads并发上传数自动分批处理无需你手动控制并发逻辑见 dropzone.ts。只想上传某一个文件用processFile(file)即可它是processFiles的便捷封装。displayExistingFile回显服务器上的旧文件编辑资料、修改头像等场景里你往往需要把已经存在服务器上的文件显示在上传区中。displayExistingFile就是为此设计的let mockFile { name: avatar.png, size: 12345 }; myDropzone.displayExistingFile(mockFile, https://your-server.com/avatar.png);只需要传一个包含name和size的模拟文件对象再加上图片 URL。它会自动触发addedfile、complete和thumbnail事件让回显出的文件和真实上传的文件在 UI 上长得一模一样还支持可选的回调与crossOrigin参数实现见 dropzone.ts。disable 与 enable随时冻结上传区如果表单暂时不希望用户再拖文件比如切换到只读模式调用disable()它会移除所有事件监听器并取消队列中的上传。需要恢复时调用enable()重新挂上监听即可。这对单页应用中频繁切换状态的表单非常实用见 dropzone.ts。另外两个小知识点若不再需要某个 Dropzone直接disable()即可安全下线不满意的浏览器原生confirm弹窗可以覆写全局Dropzone.confirm换成自定义 UI。文件状态筛选器files 的四种切片通过myDropzone.files可拿到全部文件而按状态筛选则有一组现成方法实现见 dropzone.tsgetAcceptedFiles()所有通过校验的文件getRejectedFiles()所有被拒绝的文件getQueuedFiles()排队中的文件getUploadingFiles()正在上传的文件配合maxFiles等选项可以方便地实现再传一个就超限这类提示逻辑。速查表按需检索我想……调用移除单个文件myDropzone.removeFile(file)清空列表含取消上传myDropzone.removeAllFiles(true)手动开始上传队列myDropzone.processQueue()回显服务器已有文件myDropzone.displayExistingFile(mockFile, url)取消某文件上传myDropzone.cancelUpload(file)冻结 / 恢复上传区myDropzone.disable()/enable()统计排队文件数myDropzone.getQueuedFiles().length总结Dropzone 的方法 API 设计得很克制移除文件、控制队列、回显已有文件、启停实例核心就这几件事配合addedfile、complete、removedfile等事件足以覆盖绝大多数上传交互需求。建议搭配官方文档的方法篇和上传队列篇阅读上手效率更高。【免费下载链接】dropzoneDropzone is an easy to use dragndrop library. It supports image previews and shows nice progress bars.项目地址: https://gitcode.com/gh_mirrors/dr/dropzone创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考