DEV Community
·
在 Next.js 中上传图片（文件上传，Filestack）
原文英文，约700词，阅读约需3分钟。
📝
内容提要
在Next.js中上传图片可以直接上传到后端或使用Filestack服务。直接上传需要创建表单和API端点，适合简单需求；Filestack则需安装相关包和获取API密钥，提供高级文件管理功能。
🎯
关键要点
-
在Next.js中上传图片有两种方法：直接上传到后端或使用Filestack服务。
-
直接上传需要创建表单和API端点，适合简单需求。
-
使用Filestack需要安装相关包并获取API密钥，提供高级文件管理功能。
-
创建上传表单时，使用useState存储文件并通过fetch发送到后端。
-
在Next.js中创建API端点处理上传，使用fs模块保存文件。
-
确保项目根目录下有一个名为uploads的文件夹。
-
使用Filestack时，首先需要安装Filestack包并设置API密钥。
-
Filestack提供现成的上传组件，用户可以方便地选择和上传图片。
-
上传后可以使用Filestack生成的URL显示上传的图片。
❓
延伸问答
在Next.js中如何直接上传图片？
可以通过创建表单和API端点来直接上传图片，使用useState存储文件并通过fetch发送到后端。
使用Filestack上传图片需要哪些步骤？
首先安装Filestack包，设置API密钥，然后使用Filestack提供的组件进行上传。
如何在Next.js中创建处理上传的API端点？
在pages/api/upload.js中创建一个处理POST请求的API，使用fs模块保存上传的文件。
上传图片后如何显示上传的图片？
可以使用Filestack生成的URL来显示上传的图片。
在Next.js项目中需要创建什么文件夹来存储上传的图片？
需要在项目根目录下创建一个名为uploads的文件夹。
Filestack的优势是什么？
Filestack提供文件托管、CDN和高效的图像处理功能，适合不想自己管理文件存储的用户。
🏷️
