React.js 中的文件上传

React.js 是一个流行的 JavaScript 库，用于构建用户界面和应用程序。文件上传是 Web 应用程序开发中一个常见的需求，本文将介绍如何使用 React.js 来实现文件上传功能。

使用<input>元素

在 React.js 中，要实现文件上传功能，可以使用内置的<input>元素。具体来说，需要将<input>元素中的type属性设置为file，以指定该元素用于文件上传。然后，可以使用onChange事件处理程序来获取用户所选择的文件。

下面是一个简单的 React 组件示例，演示了如何使用<input>元素来实现文件上传功能。

import React, { useState } from 'react';

function FileUploader() {
  const [selectedFile, setSelectedFile] = useState(null);

  function handleFileInputChange(event) {
    setSelectedFile(event.target.files[0]);
  }

  function handleFormSubmit(event) {
    event.preventDefault();

    // TODO: 上传文件到服务器
    console.log('上传文件', selectedFile);
  }

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="file" onChange={handleFileInputChange} />
      <button type="submit">上传</button>
    </form>
  );
}

在上面的代码中，使用了useState钩子来管理用户所选择的文件。handleFileInputChange事件处理程序将用户所选择的文件存储在selectedFile变量中。注意，在提交表单时，需要通过event.preventDefault()方法将默认的表单提交行为禁用掉，在handleFormSubmit事件处理程序中可以拿到用户所选择的文件，并将其上传到服务器。

实现文件上传进度条

文件上传通常需要一定的时间，因此在表单提交期间，需要向用户显示上传进度。React.js 提供了一些库来实现文件上传进度条。

其中最常用的库是react-dropzone，它提供了一个带有文件拖放功能的 React 组件，并能够显示文件的上传进度。

下面是使用react-dropzone库实现文件上传功能的示例代码：

import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function FileUploader() {
  const [file, setFile] = useState(null);
  const [uploadProgress, setUploadProgress] = useState(0);

  const onDrop = useCallback(acceptedFiles => {
    setFile(acceptedFiles[0]);
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  function handleFormSubmit(event) {
    event.preventDefault();

    if (!file) {
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', event => {
      setUploadProgress((event.loaded / event.total) * 100);
    });
    xhr.open('POST', '/upload');
    xhr.send(formData);
  }

  return (
    <form onSubmit={handleFormSubmit}>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        {file ? (
          <div>
            <p>{file.name}</p>
            <p>{(file.size / 1024 / 1024).toFixed(2)}MB</p>
          </div>
        ) : (
          <p>选择要上传的文件</p>
        )}
      </div>
      <progress value={uploadProgress} max="100" />
      <button type="submit">上传</button>
    </form>
  );
}

在上面的代码中，使用了react-dropzone库来实现文件上传的拖放功能。通过传递onDrop回调函数，将存储所选文件的逻辑提升到了FileUploader组件的顶层，从而可以在整个组件中使用所选文件。针对每个文件，将其存储在FormData对象中，并使用XMLHttpRequest对象将其上传到服务器。在上传文件期间，使用progress事件跟踪上传进度，并将其显示在<progress>元素中。

总结

React.js 可以很容易地实现文件上传功能。在上传文件时，需要使用<input>元素或 React 组件库（如react-dropzone）来选择和存储所选文件。为了向用户显示上传进度，可以使用XMLHttpRequest对象的progress事件并将其显示在进度条中。