如何让Next.js v13用户从前端上传视频至我的Vimeo账号？

核心思路 #

避免暴露Vimeo个人访问令牌，同时绕过Vercel无服务器函数的大小限制，最优方案是用Vimeo流式上传API配合后端签名授权，无需经过S3这类中间存储服务。

具体实现步骤 #

1. 后端生成上传凭证（Vercel Serverless Function） #

在Next.js的app/api/upload/route.ts（或Pages路由下的pages/api/upload.ts）中创建接口，用你的Vimeo令牌生成流式上传所需的凭证：

import { NextResponse } from 'next/server';
import { Vimeo } from 'vimeo';

// 初始化Vimeo客户端，从环境变量读取密钥，避免硬编码
const vimeoClient = new Vimeo(
  process.env.VIMEO_CLIENT_ID!,
  process.env.VIMEO_CLIENT_SECRET!,
  process.env.VIMEO_ACCESS_TOKEN!
);

export async function POST() {
  try {
    // 请求Vimeo生成流式上传链接
    const vimeoResp = await vimeoClient.request({
      method: 'POST',
      path: '/me/videos',
      query: {
        type: 'streaming', // 启用流式上传，支持大文件断点续传
        redirect_url: `${process.env.NEXT_PUBLIC_APP_URL}/upload-complete` // 可选，上传完成后的回调地址
      }
    });

    return NextResponse.json({
      uploadLink: vimeoResp.body.upload.upload_link,
      videoId: vimeoResp.body.uri.split('/').pop()
    });
  } catch (err) {
    return NextResponse.json({ error: '生成上传凭证失败' }, { status: 500 });
  }
}

注意：Vimeo的streaming类型上传原生支持大文件，完全适配高清视频场景，无需担心大小限制。

2. 前端直接上传至Vimeo #

前端调用后端接口获取上传链接后，直接将视频文件流式上传到Vimeo的服务器，无需经过Vercel中转：

async function handleVideoUpload(file) {
  // 第一步：从后端获取上传凭证
  const credentialResp = await fetch('/api/upload', { method: 'POST' });
  const { uploadLink } = await credentialResp.json();

  // 第二步：直接向Vimeo上传视频
  const uploadResp = await fetch(uploadLink, {
    method: 'PUT',
    body: file,
    headers: {
      'Content-Type': file.type,
      'Content-Length': file.size.toString()
    }
  });

  if (uploadResp.ok) {
    console.log('视频上传成功');
  } else {
    console.error('视频上传失败');
  }
}

3. 配置环境变量 #

在Vercel控制台的项目设置中添加以下环境变量：

• VIMEO_CLIENT_ID：你的Vimeo应用Client ID
• VIMEO_CLIENT_SECRET：你的Vimeo应用Client Secret
• VIMEO_ACCESS_TOKEN：拥有create权限的个人访问令牌
• NEXT_PUBLIC_APP_URL：你的应用公网访问地址

对比中间存储方案的优势 #

• 减少中转环节，降低成本和传输延迟
• 无需自行处理大文件断点续传、分片上传等复杂逻辑，Vimeo原生支持
• 省去S3存储的配置和维护成本

备选中转方案（若需强制使用中间存储） #

如果因业务需求必须用中间存储，可优化流程绕过Vercel函数限制：

• 后端生成S3预签名URL，前端直接上传视频到S3
• 配置S3事件通知（如触发Lambda函数），自动将视频从S3同步至Vimeo
• 全程无需经过Vercel无服务器函数，彻底规避大小限制

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