多输入框图片上传异常：修改单图触发双图同步变更求助

Hey there! Let's sort out this annoying issue where both your logo and home profile picture are updating at the same time when you only want to change one. I can see exactly why this is happening in your current code—let's break it down and fix it right away.

The Root Problem #

Looking at your handleFileUpload function, every time a file is selected, you're updating both imgUrl and homeImgUrl state variables to the same reader.result value. That means no matter which input you use, both images will always show the latest uploaded file. Oops!

Solution 1: Use a Single Function with Input Identifiers #

The simplest fix is to add a name attribute to each file input, then modify your handler to update only the corresponding state based on which input triggered the upload.

Step 1: Update Your File Inputs #

First, add unique name attributes to your two file inputs (I'll use "logo" and "homeAvatar" as examples):

<input 
  type="file" 
  onChange={this.handleFileUpload} 
  name="logo" 
  accept="image/*" 
  alt="Logo upload"
/>
<input 
  type="file" 
  onChange={this.handleFileUpload} 
  name="homeAvatar" 
  accept="image/*" 
  alt="Home avatar upload"
/>

Step 2: Modify the Upload Handler #

Update your handleFileUpload function to check which input fired the event, then update only the relevant state:

handleFileUpload(e) {
  e.preventDefault();
  // Exit early if no file was selected
  if (!e.target.files.length) return;

  const reader = new FileReader();
  const file = e.target.files[0];
  const inputName = e.target.name; // Get the input's name attribute

  reader.onloadend = () => {
    // Dynamically update the correct state based on input name
    const update = {};
    if (inputName === 'logo') {
      update.imgUrl = reader.result;
    } else if (inputName === 'homeAvatar') {
      update.homeImgUrl = reader.result;
    }
    this.setState(update);
  };

  reader.readAsDataURL(file);
}

This way, selecting a file for the logo input will only update imgUrl, and selecting one for the home avatar will only update homeImgUrl.

Solution 2: Split Into Separate Handler Functions #

If you prefer more explicit code (great for future maintenance if you add unique logic to each upload), create two separate handler functions—one for each image:

Step 1: Create Individual Handlers #

handleLogoUpload(e) {
  e.preventDefault();
  if (!e.target.files.length) return;

  const reader = new FileReader();
  const file = e.target.files[0];

  reader.onloadend = () => {
    this.setState({ imgUrl: reader.result });
  };

  reader.readAsDataURL(file);
}

handleHomeAvatarUpload(e) {
  e.preventDefault();
  if (!e.target.files.length) return;

  const reader = new FileReader();
  const file = e.target.files[0];

  reader.onloadend = () => {
    this.setState({ homeImgUrl: reader.result });
  };

  reader.readAsDataURL(file);
}

Step 2: Attach Handlers to Corresponding Inputs #

<input 
  type="file" 
  onChange={this.handleLogoUpload} 
  accept="image/*" 
  alt="Logo upload"
/>
<input 
  type="file" 
  onChange={this.handleHomeAvatarUpload} 
  accept="image/*" 
  alt="Home avatar upload"
/>

This approach keeps your code clean and makes it easier to add custom validation or processing for each image type later on.

Either solution will stop the two images from syncing—pick whichever fits your coding style best!

内容的提问来源于stack exchange，提问作者Sumayah Klf