一、简介
在 next.js 中上传图像是开发 web 应用程序时的常见任务。在本教程中，我们将探索两种不同的方法：
直接上传文件到您的后端（使用 next.js）。使用 filestack，这是一项简化云中文件管理的服务。
先决条件：
安装了最新版本的next.js。react 和 node.js 的基础知识。对于 filestack 部分，您将需要一个 filestack 帐户。
2.直接上传图片（文件上传）
首先，让我们看看如何直接在 next.js 中处理文件上传而不使用外部服务。
第 1 步：在 next.js 中创建上传表单
在所需的组件中创建一个表单来选择并上传图像。这里，我们使用 usestate 来存储文件并 fetch 将其发送到后端。
import { usestate } from 'react';export default function uploadform() { const [selectedfile, setselectedfile] = usestate(null); const handlefilechange = (event) => { setselectedfile(event.target.files[0]); }; const handlesubmit = async (event) => { event.preventdefault(); const formdata = new formdata(); formdata.append('file', selectedfile); const response = await fetch('/api/upload', { method: 'post', body: formdata, }); if (response.ok) { console.log('file uploaded successfully'); } else { console.error('error uploading file'); } }; return ( );}
第 2 步：创建 api 来处理上传
现在，在 next.js 中创建一个端点来在后端处理图像。我们将使用 next.js 的 api 路由来处理服务器端操作。
在pages/api/upload.js中创建文件：
import fs from 'fs';import path from 'path';export const config = { api: { bodyparser: false, // disable bodyparser to handle large files },};export default async function handler(req, res) { if (req.method === 'post') { const chunks = []; req.on('data', (chunk) => { chunks.push(chunk); }); req.on('end', () => { const buffer = buffer.concat(chunks); const filepath = path.resolve('.', 'uploads', 'image.png'); // saves to the `uploads` folder fs.writefilesync(filepath, buffer); res.status(200).json({ message: 'file uploaded successfully' }); }); } else { res.status(405).json({ message: 'method not allowed' }); }}
第三步：创建上传文件夹
确保项目根目录中有一个名为 uploads 的文件夹。您可以手动创建它：
mkdir uploads
有了这个，您现在可以选择图像并将其直接上传到您的服务器。
3. 使用filestack上传图片
现在，如果您更喜欢使用 filestack 等外部服务，它提供文件托管、cdn 和高效的图像处理，请按照以下步骤操作。
第1步：安装filestack
首先，我们需要在您的 next.js 项目中安装 filestack 包。
npm install filestack-js
第 2 步：在前端设置 filestack
接下来，让我们在组件中设置 filestack 小部件，以便用户可以选择和上传图像。这很简单，因为 filestack 提供了一个随时可用的小部件。
这是一个示例实现：
import { usestate } from 'react';import * as filestack from 'filestack-js';const client = filestack.init('your_api_key'); // replace with your api keyexport default function filestackupload() { const [imageurl, setimageurl] = usestate(''); const handleupload = async () => { const result = await client.picker({ onuploaddone: (res) => { setimageurl(res.filesuploaded[0].url); console.log('file uploaded: ', res.filesuploaded[0].url); }, }).open(); }; return ( {imageurl && 
} );}
第 3 步：获取 filestack api 密钥
要使 filestack 正常工作，您需要在 filestack 上创建一个帐户并生成您的 api 密钥。将上面代码中的 your_api_key 替换为提供给您的密钥。
第四步：显示上传的图片
用户上传图像后，您可以使用 filestack 生成的 url 显示它：
{imageUrl && 
}
4. 结论
就是这样！您现在有两种方法可以在 next.js 应用程序中处理图像上传：
直接上传到您的后端。使用 filestack 上传，如果您不想自己管理文件存储，它可以为您提供更高级且可扩展的解决方案。
以上就是在 Nextjs 中上传图像（文件上传、Filestack）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1492003.html
微信扫一扫 
支付宝扫一扫 
