在 react js 的同一个组件中预览并上传两个单独的图像答案

【问题标题】：Preview and upload two separate images in the same component in react js在 react js 的同一个组件中预览并上传两个单独的图像
【发布时间】：2019-08-23 05:56:29
【问题描述】：

我添加了两个输入字段以在同一组件中获取个人资料图片和封面照片。首先，我上传并预览封面照片。此后我上传个人资料图片。上传此个人资料图片时，封面照片将再次呈现。因为我要预览这两个图像，当一个接一个地上传一个图像时，它会消失一段时间，然后将两个图像一起加载。我知道发生这种情况是因为它在上传一张图像时调用 onChange 方法时渲染了两个元素。如何避免这个消失的问题（上传一张图片时渲染两个元素）？

这里是代码。

import React, { Component } from "react";
import "./UserProfile.css";
import img from "../../assets/img/3.jpg";

class ProfileImages extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      profileImage: null,
      coverImage: null,
      uploading: false
    };
  }

  handleOnChangeImage = event => {
    event.preventDefault();
    this.setState(
      {
        profileImage: event.target.files[0]
      },
      () => {
        console.log("wwwwww", this.state.profileImage);
      }
    );
  };

  handleOnChangeCoverImage = event => {
    event.preventDefault();
    this.setState({
      coverImage: event.target.files[0]
    });
  };

  render() {
      console.log("profileImage")
    return (
      <div className="animated fadeIn mt-4">
        <div
          className="card card-body responsive"
          style={{
            height: "300px",
            maxWidth: "100%",
            backgroundImage: `url(${
              this.state.coverImage != null
                ? URL.createObjectURL(this.state.coverImage)
                : "https://picsum.photos/id/863/200/200"
            })`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat"
          }}
        >
          <div className="row" style={{ height: "100%" }}>
            <div className="col-3 col-md-3">
              <div
                onClick={() => this.fileInput.click()}
                className="card card-body responsive profileImg"
                style={{
                  width: "100%",
                  height: "100%",
                  borderRadius: "100%",
                  backgroundImage: `url(${
                    this.state.profileImage != null
                      ? URL.createObjectURL(this.state.profileImage)
                      : img
                  })`,
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                  backgroundRepeat: "no-repeat"
                }}
              >
                <div className="middle">
                  <div className="text">
                    <i className="icon-camera" />
                  </div>
                </div>
              </div>
              <input
                name="profileImg"
                type="file"
                id="profileImg"
                onChange={this.handleOnChangeImage}
                style={{ display: "none" }}
                ref={fileInput => (this.fileInput = fileInput)}
              />
            </div>
            <div className="col-8" />

            {/* cover image */}
            <div className="button col-1">
              <label htmlFor="coverImg" className="float-right">
                <i className="fa fa-camera" style={{ fontSize: "30px" }} />
              </label>
              <input
                name="coverImg"
                type="file"
                id="coverImg"
                onChange={this.handleOnChangeCoverImage}
                style={{ display: "none" }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ProfileImages;

【问题讨论】：

标签： javascript reactjs onchange image-upload

【解决方案1】：

来自 MDN 文档：

“每次调用 window.URL.createObjectURL() 时，都会创建一个唯一的对象 URL，即使您已经为该文件创建了对象 URL。”

这就是反复重新渲染的原因。已经上传的图片 URL 每次都会改变，所以 react 会重新渲染。
如果将创建的 URL 存储在状态而不是文件名中，则不会在每次其他图像更改时重新渲染：

handleOnChangeImage = event => {
  event.preventDefault();
  this.setState({
    profileImage: URL.createObjectURL(event.target.files[0])      

...

handleOnChangeCoverImage = event => {
  event.preventDefault();
  this.setState({
    coverImage: URL.createObjectURL(event.target.files[0])
  });
};

【讨论】：