在 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 (
); }
现在，在 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="%7Bimageurl%7D" alt="uploaded image">}
</div>
);
}
要使 filestack 正常工作，您需要在 filestack 上创建一个帐户并生成您的 api 密钥。将上面代码中的 your_api_key 替换为提供给您的密钥。
用户上传图像后，您可以使用 filestack 生成的 url 显示它：
{imageUrl && <img src="%7BimageUrl%7D" alt="Uploaded Image">}
就是这样！您现在有两种方法可以在 next.js 应用程序中处理图像上传：