在 Next.js 中上传图像（文件上传、Filestack）

一、简介

在 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 (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

第 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 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>
  );
}

第 3 步：获取 Filestack API 密钥

要使 Filestack 正常工作，您需要在 Filestack 上创建一个帐户并生成您的 API 密钥。将上面代码中的 YOUR_API_KEY 替换为提供给您的密钥。

第四步：显示上传的图片

用户上传图像后，您可以使用 Filestack 生成的 URL 显示它：

{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}

4. 结论

就是这样！您现在有两种方法可以在 Next.js 应用程序中处理图像上传：

• 直接上传到您的后端。
• 使用 Filestack 上传，如果您不想自己管理文件存储，它可以为您提供更高级且可扩展的解决方案。

以上是在 Next.js 中上传图像（文件上传、Filestack）的详细内容。更多信息请关注PHP中文网其他相关文章！