javascript - 如何在 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

how to get the file's name

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

and then print the file out

您将需要这样的第三方库: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"));

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