React.js 中的文件上传

对于任何设想构建应用程序的开发人员来说，上传图像是他们必须考虑的主要组成部分。这是创建完整应用程序时的基本要求。文件上传是指来自客户端计算机的用户想要将文件上传到服务器。例如，用户可以在 Facebook、Instagram 上上传图片、视频等。与任何编程问题一样，有很多方法可以实现这一结果。本文介绍了一种简单的方法来实现使用 React 上传单个文件的方法。
上传图片的过程大致可以分为两个步骤：

选择文件（用户输入）：为了让用户能够选择文件，第一步是将标签添加到我们的 App 组件中。该标签的类型属性应设置为“文件”。现在，我们需要一个事件处理程序来监听对文件所做的任何更改。每当用户选择新文件并更新状态时，都会触发此事件处理程序。
向服务器发送请求：存储所选文件（处于状态）后，我们现在需要将其发送到服务器。为此，我们可以使用 fetch 或 Axios。（在这段代码中，我们使用 Axios 一个基于 Promise 的 HTTP 客户端，用于浏览器和 NodeJS）。该文件被发送到包装在 FormData 对象中的服务。
安装 Axios：
- 运行以下命令。

npm install axios --save

打开你的 react 项目目录并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import axios from 'axios';
 
import React,{Component} from 'react';
 
class App extends Component {
  
    state = {
 
      // Initially, no file is selected
      selectedFile: null
    };
    
    // On file select (from the pop up)
    onFileChange = event => {
    
      // Update the state
      this.setState({ selectedFile: event.target.files[0] });
    
    };
    
    // On file upload (click the upload button)
    onFileUpload = () => {
    
      // Create an object of formData
      const formData = new FormData();
    
      // Update the formData object
      formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
      );
    
      // Details of the uploaded file
      console.log(this.state.selectedFile);
    
      // Request made to the backend api
      // Send formData object
      axios.post("api/uploadfile", formData);
    };
    
    // File content to be displayed after
    // file upload is complete
    fileData = () => {
    
      if (this.state.selectedFile) {
         
        return (
          
            File Details:
             
File Name: {this.state.selectedFile.name}
 
             
File Type: {this.state.selectedFile.type}
 
             

              Last Modified:{" "}
              {this.state.selectedFile.lastModifiedDate.toDateString()}
            
 
          
        );
      } else {
        return (
          
            

            Choose before Pressing the Upload button
          
        );
      }
    };
    
    render() {
    
      return (
        
            
              GeeksforGeeks
            
            
              File Upload using React!
            
            
                
                
            
          {this.fileData()}
        
      );
    }
  }
 
  export default App;

输出：