javascript - 引用已撤销的对象 URL

Question

我有一个 UI，用户可以在其中加载各种文件，其中包括图像。这些图像与预览缩略图很像这个例子:

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

要点:

<input type="file" onchange="handleFiles(this.files)">

JavaScript:

function handleFiles(e) {

    …

    const img = document.createElement("img");
    img.src = window.URL.createObjectURL(file);
    img.height = 60;
    img.onload = function() {
        window.URL.revokeObjectURL(this.src);
    }
    li.appendChild(img);

    …
}

我的问题是关于 revokeObjectURL 的。据说

Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the window.URL.revokeObjectURL() method and passing in the object URL string as specified by img.src.

但是，如果这样做，就不能在第二张图片上直接引用 src。如:

other_image.src = thumbnail.src;

可以不撤销吗？仅在我动态删除缩​​略图时才撤销它？

或者；有没有其他更好的方法来引用图像？

示例代码:

const 
  no_files = document.getElementById("no_files"),
  thumbs = document.getElementById("thumbs"),
  preview = document.getElementById("preview")
  ;
  
function handle_files(files)
{
  if (!files.length) {
    no_files.classList.remove('hide');
  } else {
    no_files.classList.add('hide');
    for (let i = 0; i < files.length; i++) {
      const li = document.createElement("li");
      thumbs.appendChild(li);
      
      const img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      /* 
       * Commented out to alow ref of src
       *
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      */
      li.appendChild(img);
    }
  }
}
function do_preview (e) {
  if (e.target.tagName == 'IMG')
    preview.src = e.target.src;
}
thumbs.addEventListener('mouseenter', do_preview, true);

html, body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.hide {
  display: none;
}
ul {
  list-style: none;
}
li img {
  max-width: 40px;
  margin: 5px;
  border: 1px solid #987;
}
.images {
  display: flex;
  padding: 10px;
  overflow: auto;
  height: 90%;
}
#preview {
  max-width: 300px;
  margin: 5px;
}
.list, .display {
  border: 1px solid #789;
  padding: 5px;
  height: 90%;
}
.list {
  flex: 0 0 auto;
  overflow-y: scroll;
}
.display {
  flex: 1;
}

<input type="file" multiple accept="image/*"  onchange="handle_files(this.files)">
<div class="images">
  <div class="list">
    <p id="no_files">No files selected!</p>
    <ul id="thumbs"></ul>
  </div>
  <div class="display">
    <img id="preview">
  </div>
</div>

Answer 1

由于这些 blob URL 指向来自用户磁盘的文件，因此最好不要撤销它。它们只是指向磁盘的直接指针，它们(几乎)不在内存中保存任何内容。

如果它们指向内存中的某个文件(例如使用 Blob 构造函数获取或生成)，那么在您不再需要它们时立即撤销它们可能很重要，这样它们指向的 Blob 就可以可以释放收集的垃圾和分配给它们的内存。但是，如果您保留对指向的 Blob 的引用，或者如果您以后需要它们，那么不撤销它也是完全可以的，只要您确定不会创建太多这样的对象。