pqina/filepond

这是什么？

核心功能

• 01支持拖拽、文件选择、粘贴或 API 添加文件、目录、远程 URL 与 Data URI。
• 02支持分块上传和 AJAX 异步上传，也可将文件以 base64 编码随表单提交。
• 03上传前可对图片进行缩放、裁剪、滤镜处理，并修正 EXIF 方向。
• 04界面支持键盘操作，并经过 VoiceOver、JAWS 等读屏软件测试。
• 05通过插件扩展预览、校验和元数据等功能。

适用场景

• 在 Web 应用中加入头像或图片上传，并在客户端完成缩放。
• 在 React、Vue、Angular 或 Svelte 项目中构建多文件上传表单。
• 从浏览器向后端分块上传大文件。
• 为依赖读屏软件的用户提供可访问的上传组件。

快速上手

1. 1

   从 npm 安装 FilePond

   npm install filepond
2. 2

   导入 FilePond 并创建多文件上传组件

   import * as FilePond from 'filepond';
3. 3

   将组件添加到 DOM 中

使用前须知

• !快速开始中的代码只是示例，你仍需要一个后端接口来接收上传的文件。
• !根据 README，测试覆盖率约为 65%。
• !v5 处于 alpha 测试阶段，主要 API 可能会发生变化。

收录于专题

标签

常见问题

filepond 是什么？

一个 JavaScript 文件上传库，支持拖拽上传、图片优化、分块上传，并提供 React、Vue 等框架适配器。 FilePond 是一个用于浏览器端文件上传的 JavaScript 库。用户可以拖拽文件、从本地选择、粘贴，或通过 API 添加文件，输入源包括目录、Blob、远程 URL 和 Data URI。

filepond 可以免费使用吗？用的什么许可证？

filepond 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

filepond 还在维护吗？

活跃维护中。filepond 最近一次提交是在 2026年10月28日。

filepond 适合用来做什么？

在 Web 应用中加入头像或图片上传，并在客户端完成缩放。 在 React、Vue、Angular 或 Svelte 项目中构建多文件上传表单。 从浏览器向后端分块上传大文件。 为依赖读屏软件的用户提供可访问的上传组件。

filepond 怎么安装和运行？

从 npm 安装 FilePond: npm install filepond 导入 FilePond 并创建多文件上传组件: import * as FilePond from 'filepond'; 将组件添加到 DOM 中

在哪里获取 filepond？

源代码和安装说明在 GitHub 上：https://github.com/pqina/filepond