• 语法
• 参数
• 返回值
• 示例

• 语法
• 参数 objectURL
• Return value
• 示例

• 主要区别
• 执行时机
• 内存使用
• 优劣对比

URL.createObjectURL()

objectURL = URL.createObjectURL(object);
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​
 
一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
 
// html代码
<input type="file" id="file">
// js代码
document.querySelector('#file').onchange = function (e) {
  console.log(e.target.files[0])
  console.log(URL.createObjectURL(e.target.files[0]))

 将上方console控制台打印的blob文件资源地址粘贴到浏览器中
 
blob:http://localhost:8080/1ece2bb1-b426-4261-89e8-c3bec43a4020
URL.revokeObjectURL()
 
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
 
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
 
window.URL.revokeObjectURL(objectURL);
参数 objectURL
 
一个 DOMString，表示通过调用 URL.createObjectURL() 方法返回的 URL 对象。
 
Return value
 
undefined
 
// html代码
<input type="file" id="file">
<img id="img1" style="width: 200px;height: auto" />
<img id="img2" style="width: 200px;height: auto" />
// js代码
document.querySelector('#file').onchange = function (e) {
	const file = e.target.files[0]
	const URL1 = URL.createObjectURL(file)
	console.log(URL1)
	document.querySelector('#img1').src = URL1
	URL.revokeObjectURL(URL1)
	const URL2 = URL.createObjectURL(file)
	console.log(URL2)
	document.querySelector('#img2').src = URL2
与FileReader.readAsDataURL(file)区别
 
若对FileReader不了解，则可以翻看这边文章
 
通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
 
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
 
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
 
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL
                    URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
//preview img ： filereader方式
  document.getElementById('imgFile').onchange = function(e){ 5     var ele = document.getElementById('imgFile').files[0];
    var fr = new FileReader();
    fr.onload = function(ele){
      var pvImg = new Image();
let getObjectURL = function(file){
    let url = null ; 
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    return url ;
3，获取解析图片
url =
				
URL.createObjectURL() 方法会创建一个 DOMString，表示参数中的对象的URL。可以用于在浏览器上预览本地图片或者视频。
createObjectURL() 返回一段带 hash 的 url ，会一直存储在内存中，直到 document 触发了unload事件或者执行 revokeObjectURL() 来释放。
<input type="file" accept="video/*" />
<video width="400" height="500" con
				
考虑到用户体验， 网页的图片上传数据库前，先预览是很有必要的一个步骤，第一可以给用户带来安全感，第二防止图片文件有问题而提交到数据库，占用存储资源。
那么要实现预览有两种方式：一种是用window.URL.createObjectURl方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径，第二种是用获取 FileReader读取器。
那么无论那种方法，首先都得得到文件数据，获得文件数据是从files集合中获取。
代码如下：
<input type=file id=inp>
[removed]
 inp.onchange=function(){
				
Windows.url.createObjectURL()在 图片上传预览中使用。
 概述：为创建一个新的URL对象
objectURL=windows.URL.vreateObjectURL(blod);
blod 参数是File对象或者是Blod对象，
objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.在每次调用createObjectURL
				
URL.createObjectURL和URL.revokeObjectURL 
1.URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL。这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或者是Blob对象。 
语法：objectURL = URL.createObjectURL(blob || file); 
				
URL.createObjectURL()的使用方法
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似，下面是个人的一些理解，如有不正确的地方，欢迎指出：
通过FileR
				
### 回答1：
window.URL.createObjectURL()是一个JavaScript函数，用于创建一个Blob对象的URL。这个URL可以用于指向一个Blob对象，这个Blob对象可以是一个文件或者其他类型的数据。这个函数通常用于在浏览器中显示或下载文件。   
### 回答2：
window.url.createobjecturl() 是一种用于在浏览器中创建文件链接的方法，也可以称为 URL 对象。
在 Web 应用程序中，文件可能需要被加载到浏览器中进行处理。通过 window.url.createobjecturl() 方法可以创建一个 URL 对象，这个对象可以用于访问通过选择文件选择对话框选择的文件或者通过 File API 其他方式选择的文件。
该方法的语法如下：
window.url.createobjecturl(blob)
其中 blob 是一个 Blob （二进制大型对象）对象，可以是一个 File ，Blob 或者 MediaSource 。
这个方法创建一个哪个 URL 对象，用于表示 blob 参数中指定的二进制数据。可以使用这个 URL 对象作为一个通用的指向所需文件的链接。例如，创建一个图像元素，然后将其 src 属性设置为 URL 对象的值，就可以显示代表文件的图像。
需要注意的是，这些 URL 对象仅在当前文档中有效。在将文档传递给另一个浏览上下文或删除当前文档之前，需要调用 window.url.revokeobjecturl() 方法释放它们。
总之，window.url.createobjecturl() 是一种创建文件链接的方法，可以方便地在浏览器中处理文件。   
### 回答3：
window.URL.createObjectURL() 是一个 JavaScript 函数，用于创建指向 File, Blob 或 MediaSource 对象的 URL。在浏览器中，这些 URL 可以与<a>或<video>等元素一起使用，从而显示视频、图片等类型的文件，也能被用于随后的处理、上传和存储。
其中，File 和 Blob 都是文件对象的表示形式，它们分别指代本地文件和文件数据。MediaSource 对象指代流媒体数据，比如通过网络传输的视频文件。
使用 window.URL.createObjectURL() 创建 URL 不需要在服务器端进行任何操作。当该 URL 创建时，对应的文件内容会被存储在内存中，直到这个URL被 revokeObjectURL() 方法撤销为止。由于这种存储方式，所以 createObjectURL() 函数调用成功后并不会向服务器发送任何请求，因此也就不会增加网络的开销。
需要注意的是，调用 createObjectURL() 函数会使用浏览器的内存。如果应用程序运行时间很长且多次创建 URL，则可能会导致内存问题。因此，在文件使用完毕之后，应该使用 revokeObjectURL() 方法释放内存资源。
总的来说，window.URL.createObjectURL() 函数是一个实用工具，可以方便地处理文件、媒体资源数据，并且无需向服务器发送请求，因此在一定程度上节省了网络开销。不过，使用时也要注意内存消耗问题。