在 Nextjs 中上传图像（文件上传、Filestack）

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《在 Nextjs 中上传图像（文件上传、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 上传，如果您不想自己管理文件存储，它可以为您提供更高级且可扩展的解决方案。

到这里，我们也就讲完了《在 Nextjs 中上传图像（文件上传、Filestack）》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！