如何在 Reactjs 中制作文件选择器/选择器然后打印文件

Question

我是 React 新手，我正在使用它进行个人项目。

我目前正在尝试实现一项功能，该功能允许用户单击一个按钮，将他们带到他们的文件资源管理器并让他们选择一个文件（只是一个标准文件选择器）。

问题：
我找不到一个真正有意义的好的 React 包/库。我评估的每个选项对我来说都没有意义，因此我不想使用它。

目前我有一个允许我选择文件的按钮，但我正在尝试弄清楚如何获取文件名然后将文件打印出来？

我的密码：

import { FilePicker } from 'react-file-picker';

MyComponent = () => (
        <FilePicker
          extensions={['.docx']}
        //   onChange={FileObject => ()}
        //   onError={errMsg => ()}
        >
          <Button style={{backgroundColor: "#f57505", width: "75px"}}>Upload</Button>
        </FilePicker>
      )

谢谢！

Answer 1

如何获取文件名

FileObject 返回一个File 类型。这意味着您可以通过 FileObject.name 获取文件名。

然后将文件打印出来

您将需要这样的第三方库：https://www.npmjs.com/package/mammoth

这是一个工作示例：

import React, { Component } from "react";
import { FilePicker } from "react-file-picker";
import { render } from "react-dom";
import mammoth from "mammoth";

class App extends Component {
  constructor() {
    super();
    this.state = {
      title: "",
      text: ""
    };
  }

  extractWordRawText = arrayBuffer => {
    mammoth
      .extractRawText({ arrayBuffer })
      .then(result => {
        const text = result.value; // The raw text
        const messages = result.messages; // Please handle messages
        this.setState({ text });
      })
      .done();
  };

  handleFileChange = file => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = e => {
      this.extractWordRawText(e.target.result);
    };

    this.setState({ title: file.name });
  };

  render() {
    const { title, text } = this.state;
    return (
      <div>
        <h1>{title}</h1>
        <p>{text}</p>
        <FilePicker
          extensions={["docx"]} // Notice that I removed the "."
          onChange={this.handleFileChange}
          onError={errMsg => console.log(errMsg)} // Please handle error
        >
          <button style={{ backgroundColor: "#f57505", width: "75px" }}>
            Upload
          </button>
        </FilePicker>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

希望对您有所帮助。编码愉快。