最佳文件上传组件 —— filepond

Posted 2023-05-06

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

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

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

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

在graphql中处理文件上传的最佳方法是啥？

【中文标题】在graphql中处理文件上传的最佳方法是啥？

【英文标题】：What is the best approach to handle file upload in graphql?在graphql中处理文件上传的最佳方法是什么？

【发布时间】：2018-09-19 05:57:44

【问题描述】：

我正在寻找一种在由 prisma (graphcool) 提供支持的后端中处理文件上传的方法。但是我是一个初学者，看起来很吓人，我对文件上传的工作原理一无所知。这样做的最佳方法是什么？我可以用棱镜做吗？我对 Amazon S3 存储桶感到不满，但它看起来是一种复杂的方法。

【参考方案1】：

有很多方法可以做到这一点。我将列出一些解决方案和资源，您应该有一些东西可以帮助您前进。

两种常见的处理方法主要区别在于用于持久化上传文件的方法，直接上传到服务器文件系统与上传到云服务，通常是 S3。

对于大多数用例，第二个选项上传到云服务会更好，因为它易于扩展，易于在 S3 等设备中备份数据，以及签名 URL 等附加安全功能。特别是使用 S3 的另一件巧妙的事情是，您可以利用 AWS Athena，（由 AWS）描述为

一种交互式查询服务，可以使用标准 SQL 轻松分析 Amazon S3 中的数据

?请注意，下面的示例都利用了 Jayden Seric 的出色工作，他使用 GraphQL 完成了大量的上传工作。?

Upload to FS, API and react example：上传文件到节点服务器文件系统 middleware for apollo-upload-server：apollo-upload-server 之上的小抽象，简化了服务器开发。此示例还展示了如何与 S3 集成。