ReferenceError：FileReader 未在 Next.js 中定義

Question

我正在使用 /app 文件夾嘗試 NextJs 13 的新功能，但在處理輸入表單的簡單客戶端組件中，我嘗試使用FileReader但在瀏覽時收到錯誤消息。

這是代碼的摘要：

"use client";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import useStore from "../app/store";

export default function FileUploader() {
  const [files, setFiles] = useState([]);
  const router = useRouter();
  const addFile = useStore((state) => state.addFile);

  const fileReader = new FileReader();

  const onFileSelect = (event) => {
    event.preventDefault();
    setFiles(event.target.files);
    console.log(event.target.files);
  };

  useEffect(() => {
    if (files[0] == null) return;
    let FileToString = fileReader.readAsText(files[0]); // get error at this line
    addFile(FileToString);

    router.push("/file/" + filename);
  }, [files]);

  return (
    <input
      id="dropzone-file"
      type="file"
      className="fileInput"
      onChange={onFileSelect}
    />
  );
}

錯誤：

wait  - compiling...
event - compiled client and server successfully in 3.4s (758 modules)
ReferenceError: FileReader is not defined
    at FileUploader (webpack-internal:///(sc_client)/./components/FileUploader.js:27:24)
    ...

我究竟做錯了什么？

Answer 1

與訪問window一樣，Next.js 中的任何瀏覽器特定代碼都需要在客戶端上運行。 如果你想使用FileReader ，它是瀏覽器 API 的一部分，請將它添加到你的useEffect中，如下所示：

useEffect(() => {
  const fileReader = new FileReader();
  // ...
}, [files]);

這樣， Next.js 將不會在構建組件時查找FileReader的定義，這會導致您當前的錯誤。