Next.js客户端组件报错及前端文件大小校验实现咨询

一、修复Cannot find module '@next/client/jsx-runtime'错误 #

在Next.js 13+的App Router体系中，标记客户端组件的正确方式是使用'use client'指令，而非/* @jsxImportSource @next/client */——后者是旧版本的废弃写法，这正是导致模块找不到错误的原因。

修改你的FileUpload.tsx，将顶部的JSX导入源替换为客户端指令：

// src/FileUpload.tsx
'use client'; // 替换原有的/* @jsxImportSource @next/client */

import { useState } from 'react';

// 组件剩余代码...

二、实现前端视频文件大小检查 #

在文件选择的处理逻辑中，通过File对象的size属性获取文件字节数，与预设的最大值对比，即可完成上传前的校验。以下是完整的FileUpload.tsx示例：

'use client';

import { useState } from 'react';

const FileUpload = () => {
  const [errorMessage, setErrorMessage] = useState('');
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  
  // 自定义最大允许文件大小，示例为100MB（转换为字节：100 * 1024 * 1024）
  const MAX_FILE_SIZE = 100 * 1024 * 1024;

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // 先校验文件类型是否为视频
    if (!file.type.startsWith('video/')) {
      setErrorMessage('请选择视频格式文件');
      setSelectedFile(null);
      return;
    }

    // 校验文件大小
    if (file.size > MAX_FILE_SIZE) {
      setErrorMessage(`文件大小不能超过${MAX_FILE_SIZE / (1024 * 1024)}MB`);
      setSelectedFile(null);
      return;
    }

    // 校验通过，清除错误并保存文件
    setErrorMessage('');
    setSelectedFile(file);
  };

  const handleUpload = async () => {
    if (!selectedFile) return;

    // 这里可添加实际上传逻辑，比如创建FormData发送到后端接口
    const formData = new FormData();
    formData.append('video', selectedFile);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        alert('上传成功');
        setSelectedFile(null);
      } else {
        alert('上传失败，请重试');
      }
    } catch (err) {
      console.error('上传出错:', err);
      alert('上传过程出现错误');
    }
  };

  return (
    <div className="upload-box">
      <input
        type="file"
        accept="video/*"
        onChange={handleFileChange}
        className="file-input"
      />
      {errorMessage && <p className="error-tip">{errorMessage}</p>}
      {selectedFile && (
        <div className="file-info">
          <p>已选文件: {selectedFile.name}</p>
          <p>文件大小: {(selectedFile.size / (1024 * 1024)).toFixed(2)}MB</p>
          <button onClick={handleUpload} className="upload-btn">
            确认上传
          </button>
        </div>
      )}
    </div>
  );
};

export default FileUpload;

三、在page.tsx中使用组件 #

App Router的页面默认是服务器组件，可直接引入客户端组件使用，无需额外配置：

// src/app/page.tsx
import FileUpload from '@/FileUpload';

export default function Home() {
  return (
    <main className="page-wrapper">
      <h1>视频上传落地页</h1>
      <FileUpload />
    </main>
  );
}

关键说明 #

• 'use client'必须放在组件文件的最顶部（所有导入之前），标记该组件为客户端组件，使其能使用React状态、事件处理等客户端特性。
• 文件大小校验通过对比file.size与预设最大值实现，超过阈值时显示错误提示，阻止后续上传操作。
• 新增视频类型校验，确保用户选择的是合法视频文件，提升交互体验。

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