FileReader js 用法详解：React框架上传PDF文件案例

FileReader是一个可以异步读取文件的对象，通常用于读取用户上传的文件或通过Ajax请求获取的文件。

FileReader对象有多个方法，其中最常用的是readAsText()，它可以读取文本文件并将其以字符串形式返回。其他方法包括readAsArrayBuffer()、readAsDataURL()等，可以读取二进制数据或返回数据URL。

在React框架中，可以通过创建一个input元素来让用户上传文件，然后在onChange事件中获取文件并用FileReader对象读取。具体代码如下：

import React, { useState } from 'react';

function FileUploader() {
  const [fileContent, setFileContent] = useState('');

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => {
      setFileContent(reader.result);
    }
  };

  return (
    <div>
      <input type='file' onChange={handleFileChange} />
      <p>{fileContent}</p>
    </div>
  );
}

export default FileUploader;

这个组件会渲染一个文件上传的input元素，当用户选择文件后，handleFileChange函数会被调用，从中获取文件并用FileReader对象读取，最终将读取到的内容渲染在页面上。

当上传PDF文件时，可以将readAsText()方法改为readAsArrayBuffer()，然后用pdf.js等第三方库读取PDF文件。具体代码如下：

import React, { useState } from 'react';
import pdfjs from 'pdfjs-dist';

function PdfReader() {
  const [pdfContent, setPdfContent] = useState('');

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = () => {
      pdfjs.getDocument(new Uint8Array(reader.result)).promise.then((pdf) => {
        let content = '';
        for (let i = 1; i <= pdf.numPages; i++) {
          pdf.getPage(i).then((page) => {
            page.getTextContent().then((textContent) => {
              content += textContent.items.map((item) => item.str).join(' ');
              if (i === pdf.numPages) {
                setPdfContent(content);
              }
            });
          });
        }
      });
    }
  };

  return (
    <div>
      <input type='file' onChange={handleFileChange} />
      <p>{pdfContent}</p>
    </div>
  );
}

export default PdfReader;

这个组件会将读取到的PDF文件内容以字符串形式渲染在页面上。注意，这个例子使用了pdf.js库，需要在项目中安装并引入该库。