上传 ReactJS 之前预览图像 - JavaScript

在前端开发中，上传图像是必不可少的功能之一。在上传之前，我们通常会希望能够预览图像，以确保上传的图像是我们想要的。在使用 ReactJS 开发时，预览图像也是很容易实现的。本文将介绍如何使用 JavaScript 在上传之前预览图像。

HTML

首先，在 HTML 中我们需要加入一个 input 元素来选择文件并设置其 type 属性为 file，同时添加一个 img 元素来显示预览图像：

<input type="file" onChange={this.handleFileChange} />
<img src={this.state.previewImageUrl} alt="Preview" />

JavaScript

接下来，我们需要编写 JavaScript 代码来获取用户选择的图像并进行预览。具体步骤如下：

1. 获取用户选择的文件：

const file = event.target.files[0];

2. 将文件转换为 data URL：

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
   const imageUrl = reader.result;
   this.setState({ previewImageUrl: imageUrl });
};

3. 将 data URL 赋值给 img 元素的 src 属性：

<img src={this.state.previewImageUrl} alt="Preview" />

完整代码如下：

import React, { Component } from 'react';

class App extends Component {
  state = {
    previewImageUrl: '',
  };

  handleFileChange = (event) => {
    const file = event.target.files[0];

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      const imageUrl = reader.result;
      this.setState({ previewImageUrl: imageUrl });
    };
  };

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleFileChange} />
        <img src={this.state.previewImageUrl} alt="Preview" />
      </div>
    );
  }
}

以上就是上传 ReactJS 之前预览图像的完整实现方式。这种方法使用了 FileReader 对象将文件转换为 data URL，并将 data URL 赋值给 img 元素的 src 属性来显示预览图像。