在 Next.js SSR 上使用 FileReader？

Question

我有一个 Next.js 应用程序，我正在尝试使用 FileReader 读取 'uploaded' 文件的内容。

我的组件如下所示：

  let fileReader;
  let props = {
    multiple: false,
    onRemove: file => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: file => {
      setFileList($ => [file]);
      fileReader.readAsText(file);
      return false;
    },
    fileList,
  };

  useEffect(() => {
    fileReader = new FileReader();

    fileReader.onload = event => {
      setFileData(JSON.parse(event.target.result));
    };

    setReady(true);
  }, []);

我的上传表单调用 props.beforeUpload 将文件传递给它，但是我遇到的问题是此时 fileReader 未定义。

我怀疑这是因为服务器端渲染了什么和客户端渲染了什么，但是我不确定如何处理这个问题？

Answer 1

我不知道你怀疑什么是正确的，但如果你真的认为服务器端渲染破坏了它，那么你可以使用 next 的动态导入并使用 ssr:false 使其在客户端上呈现仅侧面，more info

在 Next.js SSR 上使用 FileReader？

Using FileReader on Next.js SSR?

reactjs

server-side-rendering

next.js