在 Next.js 中上传图像是开发 Web 应用程序时的常见任务。在本教程中，我们将探索两种不同的方法：
首先，让我们看看如何直接在 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 (
<form onSubmit={handleSubmit}>
<input type="file" onChange={handleFileChange} />
<button type="submit">Upload</button>
</form>
);
}
现在，在 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
有了这个，您现在可以选择图像并将其直接上传到您的服务器。
现在，如果您更喜欢使用 Filestack 等外部服务，它提供文件托管、CDN 和高效的图像处理，请按照以下步骤操作。
首先，我们需要在您的 Next.js 项目中安装 Filestack 包。
npm install filestack-js
接下来，让我们在组件中设置 Filestack 小部件，以便用户可以选择和上传图像。这很简单，因为 Filestack 提供了一个随时可用的小部件。
这是一个示例实现：
import { useState } from 'react';
import * as filestack from 'filestack-js';
const client = filestack.init('YOUR_API_KEY'); // Replace with your API Key
export 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 (
<div>
<button onClick={handleUpload}>Upload Image with Filestack</button>
{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}
</div>
);
}
要使 Filestack 正常工作，您需要在 Filestack 上创建一个帐户并生成您的 API 密钥。将上面代码中的 YOUR_API_KEY 替换为提供给您的密钥。
用户上传图像后，您可以使用 Filestack 生成的 URL 显示它：
{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}
就是这样！您现在有两种方法可以在 Next.js 应用程序中处理图像上传：
以上是在 Next.js 中上传图像（文件上传、Filestack）的详细内容。更多信息请关注PHP中文网其他相关文章！
