如何在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.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"));

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