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

首页 > 编程 > 在 Next.js 中上传图像（文件上传、Filestack）

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

发布于2024-11-12

Uploading Images in Next.js (File Uploads, Filestack)

一、简介

在 Next.js 中上传图像是开发 Web 应用程序时的一项常见任务。在本教程中，我们将探索两种不同的方法：

直接上传文件到您的后端（使用 Next.js）。
使用 Filestack，一种简化云中文件管理的服务。

先决条件：

已安装最新版本的Next.js。
React基础知识和Node.js.
Filestack 帐户。

2.直接上传图片（文件上传）

首先，让我们看看如何直接在 Next.js 中处理文件上传而不使用外部服务。

第 1 步：在 Next.js 中创建上传表单

在所需组件中创建一个表单以选择并上传图像。这里，我们使用useState来存储文件并获取以将其发送到后端。

从 'react' 导入 { useState }; 导出默认函数UploadForm() { const [selectedFile, setSelectedFile] = useState(null); const handleFileChange = (事件) => { setSelectedFile(event.target.files[0]); }; const handleSubmit = 异步（事件）=> { event.preventDefault(); const formData = new FormData(); formData.append('文件', selectedFile); const 响应 = 等待 fetch('/api/upload', { 方法：'POST'，正文：表单数据， }); 如果（响应.ok）{ console.log('文件上传成功'); } 别的 { console.error('上传文件时出错'); } }; 返回（

形式> ）； }

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中创建文件：

从'fs'导入fs；从“路径”导入路径；导出常量配置= { 应用程序编程接口：{ bodyParser: false, // 禁用 bodyParser 处理大文件 }, }; 导出默认异步函数处理程序（req，res）{ if (req.method === 'POST') { 常量块= []； req.on('数据', (块) => { chunks.push(块); }); req.on('结束', () => { const buffer = Buffer.concat(chunks); const filePath = path.resolve('.', '上传', 'image.png'); // 保存到 `uploads` 文件夹 fs.writeFileSync(filePath, 缓冲区); res.status(200).json({ message: '文件上传成功' }); }); } 别的 { res.status(405).json({ message: '方法不允许' }); } }

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 (

); } 第三步：创建上传文件夹

确保项目根目录中有一个名为 uploads 的文件夹。您可以手动创建：

mkdir上传

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 (

); } 有了这个，您现在可以选择图像并将其直接上传到您的服务器。

3. 使用Filestack上传图片

现在，如果您更喜欢使用

Filestack 等外部服务，它提供文件托管、CDN 和高效的图像处理，请按照以下步骤操作。

第1步：安装Filestack

首先，我们需要在您的 Next.js 项目中安装 Filestack 包。

npm 安装 filestack-js

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 步：在前端设置 Filestack

接下来，让我们在组件中设置 Filestack 小部件，以便用户可以选择和上传图像。这很简单，因为 Filestack 提供了一个随时可用的小部件。

这是一个示例实现：

从 'react' 导入 { useState }; 从“filestack-js”导入*作为文件堆栈； const client = filestack.init('YOUR_API_KEY'); // 替换为您的 API 密钥导出默认函数 FilestackUpload() { const [imageUrl, setImageUrl] = useState(''); const handleUpload = async () => { const 结果 = 等待 client.picker({ onUploadDone: (res) => { setImageUrl(res.filesUploaded[0].url); console.log('文件上传：', res.filesUploaded[0].url); }, }）。打开（）; }; 返回（

{imageUrl && 上传的图片

}

）； }

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 (

); } 第 3 步：获取 Filestack API 密钥

要使 Filestack 正常工作，您需要在 Filestack 上创建一个帐户并生成您的

API 密钥。将上述代码中的 YOUR_API_KEY 替换为提供给您的密钥。

第四步：显示上传的图片

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

{imageUrl && 上传的图片

}

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 (

); } 4. 结论

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