NFT铸币页面图片移除功能故障：移除元素后无法重新上传

核心问题是你点击关闭按钮时直接删除了img元素，导致后续上传逻辑找不到该元素进行赋值。正确的做法是保留img元素，仅清空其内容或隐藏它，而不是删除整个节点。

常见错误写法及修正 #

错误示例（直接删除img元素） #

假设你的原代码逻辑类似这样：

<div class="upload-container">
  <input type="file" id="img-upload" accept="image/*">
  <div id="preview-container"></div>
</div>

const uploadInput = document.getElementById('img-upload');
const previewContainer = document.getElementById('preview-container');

// 上传图片逻辑
uploadInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    const closeBtn = document.createElement('button');
    closeBtn.textContent = '×';
    // 点击关闭直接删除img元素
    closeBtn.addEventListener('click', () => {
      img.remove();
      closeBtn.remove();
    });
    previewContainer.appendChild(img);
    previewContainer.appendChild(closeBtn);
  }
});

这种写法下，关闭按钮会彻底删除img节点，再次上传时若逻辑依赖固定节点，就会出现无法重新渲染的问题。

修正方案1：复用固定的img元素 #

提前在HTML中定义img和关闭按钮，仅控制它们的显示状态与内容：

<div class="upload-container">
  <input type="file" id="img-upload" accept="image/*">
  <div id="preview-container">
    <img id="nft-preview" src="" alt="NFT预览图" style="display: none;">
    <button id="close-preview" style="display: none;">×</button>
  </div>
</div>

const uploadInput = document.getElementById('img-upload');
const nftPreview = document.getElementById('nft-preview');
const closePreview = document.getElementById('close-preview');

// 上传逻辑：给固定img赋值并显示
uploadInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    nftPreview.src = URL.createObjectURL(file);
    nftPreview.style.display = 'block';
    closePreview.style.display = 'block';
  }
});

// 关闭按钮逻辑：隐藏并清空，不删除元素
closePreview.addEventListener('click', () => {
  URL.revokeObjectURL(nftPreview.src); // 释放临时URL资源
  nftPreview.style.display = 'none';
  nftPreview.src = '';
  closePreview.style.display = 'none';
  uploadInput.value = ''; // 重置文件输入框，避免同图重复选择不触发change事件
});

修正方案2：动态创建但不删除，仅重置内容 #

如果必须动态创建元素，点击关闭时不要删除节点，仅清空src并隐藏：

let currentImg = null;
let currentCloseBtn = null;
const uploadInput = document.getElementById('img-upload');
const previewContainer = document.getElementById('preview-container');

uploadInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    // 首次创建元素，后续复用
    if (!currentImg) {
      currentImg = document.createElement('img');
      currentCloseBtn = document.createElement('button');
      currentCloseBtn.textContent = '×';
      currentCloseBtn.addEventListener('click', () => {
        URL.revokeObjectURL(currentImg.src);
        currentImg.src = '';
        currentImg.style.display = 'none';
        currentCloseBtn.style.display = 'none';
        uploadInput.value = '';
      });
      previewContainer.appendChild(currentImg);
      previewContainer.appendChild(currentCloseBtn);
    }
    // 赋值并显示
    currentImg.src = URL.createObjectURL(file);
    currentImg.style.display = 'block';
    currentCloseBtn.style.display = 'block';
  }
});

关键注意点 #

• 避免使用element.remove()删除需要复用的节点，优先通过style.display = 'none'隐藏或清空属性。
• 必须重置文件输入框的value为空字符串，否则用户重复选择同一张图片时不会触发change事件。
• 用URL.revokeObjectURL()释放图片临时URL，优化浏览器内存占用。

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