在 React Next.js 中显示上传的图像

在使用 React 和 Next.js 框架开发 web 应用时，用户上传图像是一个很常见的需求。本文将介绍如何在 React Next.js 中显示上传的图像。

步骤一：在 React 中处理文件上传

首先，需要使用一个 React 组件来处理文件上传，例如使用 react-dropzone 组件。以下示例代码展示了如何使用 react-dropzone 组件：

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function ImageUploader() {
  const onDrop = useCallback((acceptedFiles) => {
    // Do something with the uploaded files
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag and drop your image here, or click to select image</p>
    </div>
  );
}

在 onDrop 回调函数中，可以处理上传的文件，例如将文件上传到服务器或将文件转换成 base64 编码以显示在页面上。

步骤二：在 Next.js 中处理文件上传并返回文件 URL

在 Next.js 中，可以使用 multer 中间件来处理文件上传并生成文件 URL。以下示例代码展示了如何使用 multer 中间件：

import multer from 'multer';

const upload = multer({
  storage: multer.diskStorage({
    destination: './public/images',
    filename(req, file, callback) {
      callback(null, `${file.fieldname}-${Date.now()}`);
    },
  }),
});

export default function handler(req, res) {
  return new Promise((resolve, reject) => {
    upload.single('image')(req, res, (err) => {
      if (err) {
        return reject(err);
      }

      const url = `/images/${req.file.filename}`;
      return resolve(res.status(200).json({ url }));
    });
  });
}

在上面的示例中，使用 multer 中间件将上传的文件存储到 public/images 目录下，然后返回文件的 URL。

步骤三：在 React 中显示上传的图像

最后，在 React 组件中显示上传的图像。以下示例代码展示了如何通过 img 元素显示上传的图像：

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

function ImageUploader() {
  const [imageUrl, setImageUrl] = useState('');

  const onDrop = useCallback((acceptedFiles) => {
    const formData = new FormData();
    formData.append('image', acceptedFiles[0]);

    fetch('/api/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        setImageUrl(data.url);
      });
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {imageUrl && <img src={imageUrl} alt="" />}
      {!imageUrl && <p>Drag and drop your image here, or click to select image</p>}
    </div>
  );
}

在 onDrop 回调函数中，将上传的文件转换成 FormData，然后使用 Fetch API 将文件上传到服务器，并将返回的文件 URL 使用 setImageUrl 函数设置为组件状态，最后通过 img 元素显示上传的图像。

到此为止，就完成了在 React Next.js 中显示上传的图像的过程。