图片上传组件删除按钮显示控制：imagePaths与判断条件问题

我需要实现的效果是：当图片上传对应的label元素中没有图片时，隐藏叉形删除按钮。目前尝试两种实现方案均遇到问题：

• 方案一：通过imagePaths数组判断按钮显示状态，但页面加载时已通过setFormData()为imagePaths赋值图片链接，代码中却无法获取到有效数据（console显示该数组为空）；
• 方案二：通过label.style.backgroundImage判断是否存在图片，但当前条件label.style.backgroundImage != ""不生效，因为无图片时该值为url("null")，有图片时为url("图片链接")，需修正判断条件。

HTML代码 #

<div class="upload-catalouge">
  <input type="file" class="fileupload" id="first-file-upload-btn" hidden />
  <label for="first-file-upload-btn" class="upload-image">
    <button class="delete-image" data-index="0" hidden><img src="../img/close.png" alt="" /></button>
  </label>
  <input type="file" class="fileupload" id="second-file-upload-btn" hidden />
  <label for="second-file-upload-btn" class="upload-image">
    <button class="delete-image" data-index="0"><img src="../img/close.png" alt="" /></button>
  </label>
  <input type="file" class="fileupload" id="third-file-upload-btn" hidden />
  <label for="third-file-upload-btn" class="upload-image">
    <button class="delete-image" data-index="0"><img src="../img/close.png" alt="" /></button>
  </label>
  <input type="file" class="fileupload" id="fourth-file-upload-btn" hidden />
  <label for="fourth-file-upload-btn" class="upload-image">
    <button class="delete-image" data-index="0"><img src="../img/close.png" alt="" /></button>
  </label>
</div>

JavaScript代码 #

let user = JSON.parse(sessionStorage.user || null);
let loader = document.querySelector(".loader");
 
// 检查用户是否已登录
window.onload = () => {
  if (user) {
    if (!compareToken(user.authToken, user.email)) {
      location.replace("/login");
    }
  } else {
    location.replace("/login");
  }
};
 
// 图片上传处理
let uploadImages = document.querySelectorAll(".fileupload");
const deleteButtons = document.querySelectorAll(".delete-image");
 
let imagePaths = []; // 存储所有上传图片的路径
 
uploadImages.forEach((fileupload, index) => {
  fileupload.addEventListener("change", () => {
    const file = fileupload.files[0];
    let imageUrl;
 
    if (file.type.includes("image")) {
      // 用户上传的是图片
      fetch("/s3url")
        .then((res) => res.json())
        .then((url) => {
          fetch(url, {
            method: "PUT",
            headers: new Headers({ "Content-Type": "multipart/form-data" }),
            body: file,
          }).then((res) => {
            imageUrl = url.split("?")[0];
            imagePaths[index] = imageUrl;
            let label = document.querySelector(`label[for=${fileupload.id}]`);
            label.style.backgroundImage = `url(${imageUrl})`;
            let productImage = document.querySelector(".product-image");
            productImage.style.backgroundImage = `url(${imageUrl})`;
          });
        });
    } else {
      showAlert("只能上传图片");
    }
  });
});
 
console.log(`window.onload下方的imagePaths : `, imagePaths);
const labels = document.querySelectorAll(".upload-image");
labels.forEach((label) => {
  console.log(`每个label的style.backgroundImage :`, label.style.backgroundImage);
});
 
deleteButtons.forEach((deleteButton, index) => {
  deleteButton.addEventListener("click", () => {
    imagePaths[index] = null;
    let label = document.querySelector(`label[for=${deleteButton.parentNode.htmlFor}]`);
    label.style.backgroundImage = null;
    let productImage = document.querySelector(".product-image");
    imageLinks = imagePaths.filter((value) => value);
    productImage.style.backgroundImage = `url(${imageLinks[imageLinks.length - 1]})`;
  });
});
 
// 已有商品详情处理
 
const setFormsData = (data) => {
  productName.value = data.name;
  shortLine.value = data.shortDes;
  des.value = data.des;
  actualPrice.value = data.actualPrice;
  discountPercentage.value = data.discount;
  sellingPrice.value = data.sellPrice;
  stock.value = data.stock;
  tags.value = data.tags;
 
  // 设置图片
  imagePaths = data.images;
  console.log(`setFormData中的imagePaths :`, imagePaths);
  /* 我把imagePaths存入localStorage */
 
  imagePaths.forEach((url, i) => {
    let label = document.querySelector(`label[for=${uploadImages[i].id}]`);
    label.style.backgroundImage = `url(${url})`;
    let productImage = document.querySelector(".product-image");
    imageLinks = imagePaths.filter((value) => value);
    productImage.style.backgroundImage = `url(${imageLinks[imageLinks.length - 1]})`;
    console.log(`setFormData中的label.style.backgroundImage :`, label.style.backgroundImage);
  });
 
  // 设置尺寸
  sizes = data.sizes;
 
  let sizeCheckbox = document.querySelectorAll(".size-checkbox");
  sizeCheckbox.forEach((item) => {
    if (sizes.includes(item.value)) {
      item.setAttribute("checked", "");
    }
  });
};
 
const fetchAddProductDataId = () => {
  fetch("/get-products", {
    method: "post",
    headers: new Headers({ "Content-Type": "application/json" }),
    body: JSON.stringify({ email: user.email, id: productId }),
  })
    .then((res) => res.json())
    .then((data) => {
      setFormsData(data);
    })
    .catch((err) => {
      console.log(err);
    });
};
 
let productId = null;
if (location.pathname != "/add-product") {
  productId = decodeURI(location.pathname.split("/").pop());
 
  fetchAddProductDataId();
}

CSS代码 #

.upload-image:hover .delete-image {
  opacity: 0.8;
  pointer-events: all;
}
 
.delete-image {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
  background: #fff;
  border: none;
  outline: none;
  z-index: 2;
  cursor: pointer;
  pointer-events: none;
}
 
.delete-image img {
  height: 15px;
}
 
.upload-image {
  position: relative;
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  cursor: pointer;
  background-size: cover;
}
 
.upload-image:hover {
  background: rgba(0, 0, 0, 0.2);
  background-size: cover;
}

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