Javascript 如何在Reactjs中创建文件选择器&；然后把文件打印出来

我是个新手&我正在用它做一个个人项目

我目前正在尝试实现一个功能，允许用户单击一个按钮，将他们带到他们的文件浏览器&让他们选择一个文件（只是一个标准的文件选择器）

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

目前，我有一个按钮，允许我选择一个文件，但我试图找出如何获得文件的名称，然后打印出文件

我的代码：

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

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

从'react file picker'导入{FilePicker}；
MyComponent=（）=>(
()}
//onError={errMsg=>（）}
>
上传
)

谢谢

如何获取文件名

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

然后把文件打印出来

您需要这样的第三方库：

这里有一个工作示例：

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"));

import React，{Component}来自“React”；
从“react file picker”导入{FilePicker}；
从“react dom”导入{render}；
从“猛犸”进口猛犸；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
标题：“，
案文：“”
};
}
extractWordRawText=arrayBuffer=>{
猛犸象
.extractRawText（{arrayBuffer}）
。然后（结果=>{
const text=result.value；//原始文本
const messages=result.messages；//请处理消息
this.setState（{text}）；
})
.完成（）；
};
handleFileChange=文件=>{
const reader=new FileReader（）；
reader.readAsArrayBuffer（文件）；
reader.onload=e=>{
this.extractWordRawText（即target.result）；
};
this.setState（{title:file.name}）；
};
render（）{
const{title，text}=this.state；
返回(
{title}
{text}

console.log（errMsg）}//请处理错误
>
上传
);
}
}
render（，document.getElementById（“根”））；

---

希望能有帮助。愉快的编码。

是的，我是说我想得到文件，然后打印出文件的实际文字。如果我传入一个文件，上面写着“你好”，我想在我的页面上打印“你好”，好吧，我知道你在获取文件名方面说了些什么，但是我需要什么实际代码才能在网页上打印它？我尝试过：FilePicker extensions={['.docx']}onChange={FileObject=>（{FileObject.name}）}//onError={errMsg=>（）}>Upload@coder\u coder123我只是用一个完整的工作示例编辑了我的文章。它提取word文档中的原始文本。我认为这是你们项目的良好开端。祝你好运