npm 是一个 Node.js 包管理器，它允许我们方便地安装、更新和卸载模块。其中一个常用的模块就是 React，因为它是一个非常流行的前端框架。本文将介绍一个名为 react-simple-file-input 的 npm 包，该包提供了一个简单的 React 组件，用于上传和预览文件。
安装
使用 npm 安装 react-simple-file-input：
npm install --save react-simple-file-input
使用
在 React 组件中引入 react-simple-file-input：
import FileInput from 'react-simple-file-input';
然后在 render 方法中使用它：
<FileInput
onChange={this.handleFileChange}
type="image"
preview
/>这里有三个属性：
onChange：当文件被选中时触发的回调函数；type：设置文件类型，可用值为 "text"、"image" 或 "audio"；preview：是否预览图片或音频文件。
在 handleFileChange 回调函数中，可以获取所选文件的信息：
handleFileChange = (event, file) => {
console.log(file); // { name, type, size, dataURL }
};示例代码
下面是一个完整的示例代码，演示了如何使用 react-simple-file-input 来上传和预览图片：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- --------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--
-
---------------- - ------- ----- -- -
--------------- ------ ------------ ---
-
-------- -
------ -
-----
----------
--------------------------------
------------
-------
--
---- ---------------------- ------ --
------
--
-
-
------ ------- ----指导意义
使用 react-simple-file-input，可以节省我们编写自定义文件上传组件的时间。此外，通过阅读代码，我们可以了解如何创建并发布 npm 包，以及如何在 React 中使用自定义组件。因此，学习这些知识也是本文的指导意义之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204260