无法在“ URL”上执行“ createObjectURL”:


131

在Safari中显示以下错误。

无法在“ URL”上执行“ createObjectURL”:未找到与提供的签名匹配的函数。

我的代码是:

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

这是我的图像代码:

function myUploadOnChangeFunction() { 
    if (this.files.length) { 
       for (var i in this.files) { 
           if (this.files.hasOwnProperty(i)) { 
              var src = createObjectURL(this.files[i]); 
              var image = new Image(); 
              image.src = src; 
              imagSRC = src; 
              $('#img').attr('src', src); 
            }
       }           
   } 
} 

6
嗨,哈迪克,createObjectURL(...)遇到错误时,您要传递给函数什么?
Arthur Weborg 2014年

2
对象必须是一个File对象或Blob对象来创建一个URL对象for.see devdocs.io/dom/window.url.createobjecturl
信丰

1
这是我的图像代码:function myUploadOnChangeFunction(){if(this.files.length){for(this.files中的var i){if(this.files.hasOwnProperty(i)){var src = createObjectURL(this。文件[i]);var image = new Image(); image.src = src; imagSRC = src; $('#img')。attr('src',src); }}}}
Hardik Mandankaa 2014年

@HardikMansaraa继续并将其编辑为您的问题。
soktinpk 2014年

window.URL.createObjectURL('broken')引发错误:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
Juan Mendes

Answers:


150

更新

createObjectURL()当浏览器禁用该方法时,请考虑避免该方法。只需将MediaStream对象直接附加到例如element 的srcObject属性即可。HTMLMediaElement<video>

const mediaStream = new MediaStream();
const video = document.getElementById('video-player');
video.srcObject = mediaStream;

但是,如果您需要与工作MediaSourceBlob或者File,你必须创建一个URL URL.createObjectURL(),并将其分配给HTMLMediaElement.src

在此处阅读更多详细信息:https : //developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject


较旧的答案

当我传递给createObjectURL原始数据时,我遇到了同样的错误:

window.URL.createObjectURL(data)

它必须是BlobFileMediaSource对象,而不是数据本身。这对我有用:

var binaryData = [];
binaryData.push(data);
window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))

还要检查MDN以获取更多信息:https : //developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL


2
嗨..如果我正在处理“ application / pdf”,该怎么办?当我处理PDF文件时,在控制台上出现相同的错误
N Sharma

@mimo我正在使用相同的代码下载文件。但是有两个文件正在下载。一个是正​​确的文件,另一个是具有相同名称但状态失败的文件正在下载。你知道为什么会这样吗?
Shardul

我对此评论感到困惑,在MDN中,它不鼓励使用URL.createObjectURL()媒体流。但是,它没有声明不像最初问题中所述将其用于文件输入。
alextrastero

140

造成此错误的原因createObjectURL是Google Chrome浏览器不赞成使用该功能

我改变了这个:

video.src=vendorUrl.createObjectURL(stream);
video.play();

对此:

video.srcObject=stream;
video.play();

这对我有用。



createObjectURL未过时如图这里但已不再接受媒体流对象
goodies4uall

这应该是答案。
DomingoR

video.play()似乎受到限制是另一个问题:DOMException:play()只能由用户手势启动。
user889030

@ user889030只是意味着您无法打开网页,无法期望摄像头流开始。您必须让用户明确启动流。只需使用一个按钮即可开始直播
S.Ramjit

26

我的代码被破坏,因为我使用的是不推荐使用的技术。过去是这样的:

video.src = window.URL.createObjectURL(localMediaStream);
video.play();

然后我将其替换为:

video.srcObject = localMediaStream;
video.play();

效果很好。

编辑:最近localMediaStream已被弃用并替换为MediaStream。最新的代码如下所示:

video.srcObject = MediaStream;

参考文献:

  1. 不推荐使用的技术:https : //developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  2. 不推荐使用的现代技术:https//developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. 现代技术:https//developer.mozilla.org/en-US/docs/Web/API/MediaStream

9

我对MediaStream遇到了相同的错误。解决方案是将流设置为srcObject。

文档

重要说明:如果您仍然具有依靠createObjectURL()将流附加到媒体元素的代码,则需要更新代码以将srcObject直接设置为MediaStream。



3

问题是循环中提供的键未引用文件的索引。

for (var i in this.files) {
    console.log(i);
}

上面代码的输出是:

0
length
item

但是预期的是:

0
1
2
etc...

然后在浏览器尝试执行时发生错误,例如:

window.URL.createObjectURL(this.files["length"])

我建议根据以下代码实现:

var files = this.files;
for (var i = 0; i < files.length; i++) {
    var file = files[i],
        src = (window.URL || window.webkitURL).createObjectURL(file);
    ...
}

我希望这可以帮助某人。

问候!


1

如果您使用的是ajax,则可以添加以下选项xhrFields: { responseType: 'blob' }

$.ajax({
  url: 'yourURL',
  type: 'POST',
  data: yourData,
  xhrFields: { responseType: 'blob' },
  success: function (data, textStatus, jqXHR) {
    let src = window.URL.createObjectURL(data);
  }
});

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.