如何在Next.js中上传图片并通过Real-ESRGAN处理后返回增强图？

1. 前端上传组件（客户端组件） #

在Next.js中创建客户端组件，实现图片选择、上传及结果展示：

'use client';

import { useState } from 'react';

export default function ImageEnhancer() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [enhancedImageUrl, setEnhancedImageUrl] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
    setEnhancedImageUrl(null);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!selectedFile) return;

    setIsLoading(true);
    const formData = new FormData();
    formData.append('image', selectedFile);

    try {
      const res = await fetch('/api/enhance-image', {
        method: 'POST',
        body: formData,
      });

      if (!res.ok) throw new Error('处理失败');
      
      const data = await res.json();
      setEnhancedImageUrl(data.enhancedImageUrl);
    } catch (err) {
      console.error(err);
      alert('图片增强失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto p-4">
      <form onSubmit={handleSubmit} className="space-y-4">
        <input
          type="file"
          accept="image/*"
          onChange={handleFileChange}
          className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
        />
        <button
          type="submit"
          disabled={!selectedFile || isLoading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md disabled:bg-gray-400"
        >
          {isLoading ? '增强中...' : '增强图片'}
        </button>
      </form>

      {enhancedImageUrl && (
        <div className="mt-6">
          <h3 className="text-lg font-medium mb-2">增强后的图片</h3>
          <img src={enhancedImageUrl} alt="Enhanced" className="w-full rounded-md" />
        </div>
      )}
    </div>
  );
}

2. 后端API路由（调用Real-ESRGAN模型） #

在app/api/enhance-image/route.js创建API路由，处理图片上传并调用指定模型：

首先安装依赖（基于托管模型服务实现，避免本地部署算力不足）：

npm install replicate

编写路由代码：

import { NextResponse } from 'next/server';
import Replicate from 'replicate';

const replicate = new Replicate({
  auth: process.env.REPLICATE_API_TOKEN,
});

export async function POST(request) {
  try {
    const formData = await request.formData();
    const image = formData.get('image');

    if (!image || !image.type.startsWith('image/')) {
      return NextResponse.json({ error: '请上传有效的图片文件' }, { status: 400 });
    }

    // 将File对象转为Base64格式供模型读取
    const arrayBuffer = await image.arrayBuffer();
    const base64Image = Buffer.from(arrayBuffer).toString('base64');
    const imageInput = `data:${image.type};base64,${base64Image}`;

    // 调用指定版本的Real-ESRGAN模型
    const output = await replicate.run(
      'cjwbw/real-esrgan:d0ee3d708c9b911f122a4ad90046c5d26a0293b99476d697f6bb7f2e251ce2d4',
      {
        input: {
          image: imageInput,
          scale: 2, // 支持2/3/4倍放大，可按需调整
        },
      }
    );

    return NextResponse.json({ enhancedImageUrl: output });
  } catch (err) {
    console.error('模型调用失败:', err);
    return NextResponse.json({ error: '图片增强服务异常' }, { status: 500 });
  }
}

3. 环境配置 #

在项目根目录创建.env.local文件，添加模型服务的API密钥：

REPLICATE_API_TOKEN=your_api_token_here

关键注意事项 #

• 模型调用依赖算力资源，优先选择托管服务而非本地部署，避免Next.js服务器性能瓶颈
• 前端需限制上传文件类型为图片，后端也要做二次校验
• 可根据需求调整模型的scale参数，控制图片放大倍数
• 若需要持久化增强后的图片，可将模型返回的URL转存到云存储后再返回给前端

内容的提问来源于stack exchange，提问作者user21841027