最新鲜出炉！React下的文件上传也能秀进度，get不到那你亏大了！

2023-09-03 09:56:33

告别漫长等待：利用 React 和 jQuery 实现实时文件上传进度显示

引言

在当今互联网时代，文件上传已成为一项基础且常见的操作，但它也经常让人陷入漫长的等待。尤其是当网络不给力或服务器反应迟钝时，上传一个文件可能需要几分钟甚至更长时间，让人望眼欲穿。

想象一下，如果能实时显示上传进度，那将多么令人舒坦！有了它，我们就可以掌握文件上传的实时进展，心里有底，不再被无止境的等待所煎熬。今天，我们将揭开如何利用 React 和 jQuery 联手，在 React 项目中实现文件上传进度显示这个超实用的功能！

踏上 React 之旅

首先，让我们创建一个 React 项目，然后在其中安装 jQuery 包。之后，就可以着手编写我们的上传组件了。在这个组件中，我们将定义一个名为 handleUpload 的方法，它将负责处理文件上传以及实时显示上传进度。

// 代码时间
import React, { useState } from "react";
import $ from "jquery";

function MyUpload(props) {
  const [progress, setProgress] = useState(0);

  const handleUpload = (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append("file", file);

    $.ajax({
      url: "/upload",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      xhr: function () {
        const xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", (e) => {
          if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            setProgress(percent);
          }
        });
        return xhr;
      },
    }).done(function (data) {
      // 上传成功后处理逻辑
    });
  };

  return (
    <div>
      <input type="file" onChange={handleUpload} />
      <div>{progress}%</div>
    </div>
  );
}

export default MyUpload;