最佳文件上传组件 —— filepond

2022-06-03  本文已影响0人  alue
filepond

这个组件为前端提供了vue适配 vue-filepond,为后端提供了Django适配 django-drf-filepond. 二者相互配合,开箱即用,能够实现文件上传的个性化定制。主要包括一下几个方面:

  1. 能够提供分片上传 chunked uploads。
  2. 能够实现文件夹上传。
  3. 能够实现复制粘贴式上传。
  4. 能够实现拖拽上传。
  5. 能够实现操作撤销。
  6. 能够实现重传。
  7. 操作丝滑美观。
  8. 图片、pdf 等格式的预览。

其常规操作流程为
添加文件后,vue-filepond 会自动传给 server.url . 这里后端需要配合实现这个临时文件的存储,并且返回临时文件的ID。

如果后端用了 django-drf-filepond库的话,上面这个过程就不用自己动手做了,只需要配置一条路由 path('fp/', include('django_drf_filepond.urls')) 即可。同时,这条路由能够跟前端配合,完成临时文件的上传、重传、删除等功能。

常见的场景是,用户将文件跟表单的其它字段一同提交至服务器。在点击确认前,filepond 已经完成了临时文件的上传。所以,点击确认后,服务器只用将硬盘里的临时文件持久化即可,缩短了等待时间,用户体验会更好。

上一篇下一篇

猜你喜欢

热点阅读