在 React中上传图片

在 Web 应用程序中，上传图片是一项基本功能。 React作为一个流行的 JS 库，可以帮助我们简化上传图片的流程。

前置条件

在本教程中，我们使用 React 和 Axios 来实现图片上传。在开始之前，请确保您已经在您的项目中安装了它们。

使用以下命令安装：

npm install react

npm install axios

文件选择

在上传任何内容之前，用户必须提供要上传的文件。有一个<input>元素可以允许用户浏览他们的计算机，选择要上传的文件。然后，我们可以使用JavaScript方法，将所选文件信息提取并存储在我们的组件状态中。

以下是当用户选择文件时的处理程序：

handleFileSelect = event => {
    this.setState({
        selectedFile: event.target.files[0]
    })
}

上面的代码定义了一个名为 handleFileSelect 的方法，该方法将被用作用户选择文件时的处理程序。在该方法中，我们可以通过 event.target.files 来获取用户所选的文件信息，并将其设置为组件的状态变量。

文件上传

在获取所选文件的信息之后，我们需要将其上传到服务器。 Axios 可以帮助我们轻松地管理网络请求。

使用以下代码，我们可以创建一个名为 uploadFile 的方法来上传文件：

uploadFile = () => {
    const formData = new FormData();
    formData.append('file', this.state.selectedFile);
    const uploadUrl = 'https://localhost:3000/upload';
    axios.post(uploadUrl, formData)
        .then(res => {
            console.log(res);
        })
}

上面的代码通过 axios.post() 发送一个 POST 请求，向我们的服务器传递数据。 在这个方法中，我们创建了一个包含文件数据的 FormData，并设置文件键为“文件”。 然后，我们将 URL 和 formData 传递给 Axios，并附加了一个 .then() 方法，以便在上传成功后显示响应消息。

完整代码

以下是完整的文件上传组件代码示例。

import React, { Component } from 'react';
import axios from 'axios';

class FileUpload extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedFile: null
        };
    }

    handleFileSelect = event => {
        this.setState({
            selectedFile: event.target.files[0]
        })
    }

    uploadFile = () => {
        const formData = new FormData();
        formData.append('file', this.state.selectedFile);
        const uploadUrl = 'https://localhost:3000/upload';
        axios.post(uploadUrl, formData)
            .then(res => {
                console.log(res);
            })
    }

    render() {
        return (
            <div>
                <input type="file" name="file" onChange={this.handleFileSelect} />
                <button onClick={this.uploadFile}>Upload</button>
            </div>
        );
    }
}

export default FileUpload;

结论

在 React 中，通过 Axios 和 FormData，我们可以轻松地上传文件。上传文件的过程与使用其他方法处理 AJAX 请求类似。 本文介绍了每个部分的相关代码和实现。 以上方法适用于大多数 Web 应用程序，并做了很好的简化处理。