如何使用 ReactJS 上传图像并预览它？

在本文中，我们将学习如何简单地将照片从本地设备上传到我们的 React 项目。我们可以通过静态方法来实现 网址。创建对象URL（）。

方法 网址。 createObjectURL() 接受一个对象并返回一个表示用作参数的对象的 URL。

先决条件：

• react.js的介绍和安装
• 反应钩子
• 反应使用状态

创建反应应用程序：

第 1 步：创建 react 项目文件夹，为此打开终端，如果您已经全局安装了 create-react-app，则编写命令 npm create-react-app 文件夹名称。如果您还没有，则使用命令 npm -g create-react-app 全局安装 create-react-app ，或者可以通过以下方式在本地安装 npm 我创建反应应用程序。

npm create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。

cd project

项目结构：它看起来像这样：

我们正在使用 React-hook useState 创建一个状态名称文件，该文件将存储该文件。我们正在创建一个将文件作为输入的输入字段。

我们正在创建一个名为 handleChange 的 onChange函数，它存储为我们通过 URL 上传的图像生成的 URL字符串。创建对象URL（）。

如果我们像这样执行 console.log：

console.log(e.target.files)

我们将得到以下输出：

因此，在我们的文件状态中，我们将只存储文件[0]，它只包含我们上传的文件的名称。我们通过函数handleChange将数据存储在我们的文件状态中。

示例：之后，我们将存储在 App.js 文件中的字符串放在 img 标签的 src 属性中以显示它。

App.js

import React, { useState } from "react";
  
function App() {
    const [file, setFile] = useState();
    function handleChange(e) {
        console.log(e.target.files);
        setFile(URL.createObjectURL(e.target.files[0]));
    }
  
    return (
        

            
Add Image:
            
            
  
        
  
    );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：