React 中的客户端图片上传⬆️

设置项目

图片上传是 Web 应用程序中重要且最常用的功能之一。以 Facebook 为例，当您需要更新个人资料图片时，您需要上传一张图片，以便 Facebook 可以将其用作个人资料图片。

今天我们将学习构建一个简单的图片上传器，让用户能够选择图片并将其显示在浏览器中。希望本教程能带给你乐趣，并让你有所收获😁。开始吧！

设置项目

要设置您的项目，您可以使用create-react-app也可以转到CodeSandBox。

创建项目后，首先，让我们创建一个简单的文件输入，用于接受要上传的图像

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <input type="file" accept="image/*" multiple = "false" />
    </div>
  );
}

这里我们创建一个只接受图像的文件输入，并且一次只允许上传一个文件。

现在，让我们创建一个容器来显示上传的图像。

function App() {
  return (
    <div className="App">
      <input type="file" accept="image/*" multiple = "false"/>
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "2px dashed black"
        }}
      >
        <img
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

在这里，我们创建了一个容器，用于显示上传的图像，并且将来还可以用作图像上传按钮。
**我出于教程目的编写了内联样式。

现在有趣的部分让我们onChange在图像输入中添加一个处理程序，然后在handleImageUpload方法中访问图像文件。

function App() {
  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      console.log(file);
    }
  };

  return (
    <div className="App">
      <input type="file" accept="image/*" onChange={handleImageUpload} multiple = "false" />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
      >
        <img
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

我们handleImageUpload在创建的文件输入框的 onChange 事件上附加了一个方法。在该handleImageUpload方法中，我们获取一个（事件）对象，该对象可以访问通过我们创建的文件输入框上传的文件列表。我们只上传一张图片，因此目前e我们将访问第一个文件并显示该文件。FileList

现在我们将附加ref到img我们创建的，我们可以使用钩子显示上传的图像useRef()。

function App() {
  const uploadedImage = React.useRef(null);
  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      console.log(file);
    }
  };

  return (
    <div className="App">
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
      >
        <img
          ref={uploadedImage}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

现在我们将使用FileReader构造函数来读取文件的内容并将内容附加到img我们附加ref到的内容。

function App() {
  const uploadedImage = React.useRef(null);

  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      const reader = new FileReader();
      const {current} = uploadedImage;
      current.file = file;
      reader.onload = (e) => {
          current.src = e.target.result;
      }
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="App">
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
      >
        <img
          ref={uploadedImage}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

在该handleImageUpload方法中，我们创建一个readerusing构造函数，然后从代表元素的 ref中FileReader选择。然后，我们将一个事件监听器附加到我们创建的，当加载时，它会将要读取的文件 URL 附加到元素中。然后，我们使用该方法将文件读取为 URL ，并将所选内容传递给它。currentuploadedImageimgonloadreaderimgreader.readAsDataURL()file

让我们看看到目前为止的进展

现在让我们删除那个丑陋的输入按钮并使用创建的框作为图像上传器

function App() {
  const uploadedImage = React.useRef(null);
  const imageUploader = React.useRef(null);

  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      const reader = new FileReader();
      const { current } = uploadedImage;
      current.file = file;
      reader.onload = e => {
        current.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <input
        type="file"
        accept="image/*"
        onChange={handleImageUpload}
        ref={imageUploader}
        style={{
          display: "none"
        }}
      />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
        onClick={() => imageUploader.current.click()}
      >
        <img
          ref={uploadedImage}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
      Click to upload Image
    </div>
  );
}

这里我们创建一个imageUploaderref 并将其赋值给文件输入框，然后使用 css 隐藏丑陋的文件输入框元素display:none。之后，我们将为onClickdiv 添加一个监听器，当用户点击 div 时，监听器会触发文件输入框的点击，这意味着用户点击 div 时图片会被上传。我们给父容器添加一些样式，使所有内容都居中显示。现在，让我们看看输出效果如何。

您可以在此处找到完整的代码

谢谢。

您也可以在Twitter上关注我。

文章来源：https://dev.to/asimdahall/client-side-image-upload-in-react-5ffc

在 React 中设置客户端图片上传项目

React 中的客户端图片上传⬆️

设置项目

设置项目