react上传图片

目录

一、前置知识

二、文件上传的实现方式

三、项目结构

四、实现步骤

---

在Web开发中，上传图片是一个常见的需求，而React作为一种常用的前端开发框架，也支持图片上传的功能。在本篇博客中，我们将介绍如何使用React实现图片上传的功能。

一、前置知识

在开始之前，需要掌握以下基础知识：

    JSX语法和React组件

    状态管理和控制组件的渲染

    fetch API和FormData API

二、文件上传的实现方式

实现文件上传的方式有很多，其中比较常见的有以下几种：

    表单提交

我们可以通过表单提交的方式将文件上传到服务器。在React中，可以将表单元素封装成一个组件，然后通过表单提交事件监听实现文件上传功能。

    Ajax上传

另一种文件上传的方式是通过Ajax上传。在React中，fetch API可以方便地进行Ajax请求，我们可以将上传的文件使用FormData API包装成一个FormData对象，然后发送Ajax请求。

本篇博客中我们将介绍第二种文件上传方式，即通过Ajax上传文件。

三、项目结构

在本篇博客中，我们通过React实现一个图片上传的Demo，项目结构如下：

- src - App.js // 主组件文件

         - index.js // 入口文件

        - Upload.js // 上传组件文件

         - styles.css // 样式文件

四、实现步骤

1. 创建上传组件

首先，我们需要创建一个上传组件。这个组件应该包含以下内容：

• 用于上传文件的元素。
• 用于展示上传进度的元素。
• 一个上传按钮。
• 用于展示上传成功后的数据。

在Upload.js文件中，我们按照上述结构创建一个上传组件：

import React, { Component } from 'react';
 
class Upload extends Component {
  state = {
    progress: 0,   //上传进度
    isUploading: false, // 是否正在上传
    result: null  //上传结果数据
  };
 
  uploadFile = (event) => {
    const file = event.target.files[0];
    const data = new FormData();
    data.append('file', file);
 
    // 向服务器发送Ajax请求，上传文件
    fetch('https://your-upload-api-url.com/upload', {
      method: 'POST',
      body: data,
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent;
        const percent = Math.floor(loaded / total * 100);
        this.setState({ progress: percent });
      }
    })
      .then(res => res.json())
      .then(data => this.setState({ isUploading: false, result: data }))
      .catch(err => console.error(err));
  };
 
  render() {
    const { isUploading, progress, result } = this.state;
 
    return (
      

        
图片上传
        
        上传
        
        {result && (
          

            
上传结果
            
          
        )}
      
    );
  }
}
 
export default Upload;

在这里，我们通过fetch API实现了文件的上传。在上传过程中，我们根据上传进度更新了状态中的progress变量进行展示。当文件上传成功之后，我们将上传结果保存在状态中的result变量中，并且展示在页面上。

        2.在App.js文件中引入上传组件

在App.js文件中，我们引入刚刚编写的上传组件，并将其展示在页面上。

        3.编写应用样式

最后，我们还需要编写一些样式。在styles.css文件中添加以下样式：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
input[type="file"] {
  margin: 10px 0;
}
 
button[type="submit"] {
  margin: 10px 0;
}
 
progress {
  width: 100%;
  height: 30px;
  margin: 10px 0;
}
 
img {
  max-width: 300px;
  max-height: 300px;
  margin-top: 10px;
}

四、运行程序

现在，我们可以运行程序，在网页上选择一个文件并点击上传按钮，就可以将文件上传至服务器。上传完成后，我们可以在页面上看到上传结果。

总结：

在本篇博客中，我们介绍了在React中实现图片上传功能的步骤。通过使用Fetch API和FormData API，我们实现了将文件上传至服务器。可以学以致用，去实现类似的文件上传功能。