清除 URL.createObjectURL() 生成的对象答案

【问题标题】：Clear object generated by URL.createObjectURL()清除 URL.createObjectURL() 生成的对象
【发布时间】：2016-05-31 11:33:51
【问题描述】：

我在输入类型文件上使用 URL.createObjectURL() 将 URL 传递给 img.src 以告诉浏览器加载提供的图像。

这是我的代码：

<input type="file" accept="image/*" onchange="document.getElementById('image-container').src = window.URL.createObjectURL(this.files[0])">
<img id="image-container"/>

我想制作一个删除按钮来清除对象，以便用户可以浏览其他图像。我试图通过制作 .src = "" 来传递空字符串，但它不起作用。

<button type="button" ng-click="document.getElementById('image-container').src = ""><span aria-hidden="true">&times;</span></button>

如果我坚持继续使用 URL.createObjectURL()，谁能建议我应该怎么做才能删除创建的对象？

【问题讨论】：

标签： javascript angularjs html

【解决方案1】：

您应该改用数据绑定来执行此操作。然后，我将有条件地显示图像。

// Controller
this.src = "";
this.fileSelected = $event => {
  this.src = $window.URL.createObjectURL($event.target.files[0]);
}

// Template
<input type="file" accept="image/*"
  ng-change="ctrl.fileSelected($event)">
<img ng-if="ctrl.src" ng-src="ctrl.src">

<button type="button" ng-click="ctrl.src = ''">
  <span aria-hidden="true">&times;</span>
</button>

【讨论】：

我试过你的答案，但它显示 TypeError: Cannot set property 'src' of null
@Anthonius 我需要有关您的设置的更多信息来调试它。我怀疑您没有使用设置为ctrl 的controllerAs。您可以将其设置为任何值或只使用$scope，但首选使用controllerAs。
在控制器中我使用$scope.src = ""; $scope.fileSelected = function(event) { $scope.src = $window.URL.createObjectURL(event.target.files[0]); } 在模板中我写<input type = "file" accept = "image/*" ng-change="fileSelected($event)"> <img ng-if="src" ng-src="src"> <button type="button" ng-click="src=''"> <span aria-hidden="true">&times;</span> </button>

【解决方案2】：

这个问题可能已经有很多人回答了，但是你可以使用revokeObjectURL()的方法来释放一个对象的URL。 URL.createObjectURL() 方法创建一个 DOMString ，其中包含一个 URL，该 URL 表示参数中给出的对象（在本例中为文件）。此 URL 生命周期将与创建它的窗口中的文档选择相关联。新文件的 URL 将是指定的文件/blob 对象。现在，如果您想根据用户的新选择发布此 URL，只需调用静态方法 revokeObjectURL() 即可，如下所示：

if(event.target.files.length !== 0){
     this.setState({
          src: URL.createObjectURL(event.target.files[0]),
     });
}
else {
     this.setState({
          src: URL.revokeObjectURL(event.target.files[0]),
     });
}

由于我们希望在用户重新选择新文件（或缺少新文件）时释放对象 URL，调用 revokeObjectURL() 让浏览器知道不再保留对文件的引用（本质上是重置我们所做的createObjectURL())。

【讨论】：