在 React js 的同一组件中预览和上传两个单独的图像

Question

我在同一个组件中添加了两个输入字段来获取个人资料图片和封面照片。首先我上传并预览封面照片。此后我上传个人资料图片。上传此个人资料图片时，封面照片将再次呈现。当我要预览这两张图片时，当一张接一张地上传时，两张图片都会消失一段时间，然后将两张图片一起加载。我知道发生这种情况是因为它在上传一张图片时调用 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;

Answer 1

来自 MDN 文档：

"Each time you call window.URL.createObjectURL(), a unique object URL is created even if you've created an object URL for that file already."

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

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])
  });
};

在 React js 的同一组件中预览和上传两个单独的图像

Preview and upload two separate images in the same component in react js

javascript

reactjs

onchange

image-upload