Nie udało się wykonać „createObjectURL” na „URL”:


145

Wyświetl poniżej błąd w Safari.

Nie udało się wykonać „createObjectURL” na „URL”: nie znaleziono funkcji pasującej do podanego podpisu.

Mój kod to:

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

To jest mój kod do obrazu:

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
Cześć Hardik, co przekazujesz do swojej createObjectURL(...)funkcji, kiedy pojawia się ten błąd?
— Arthur Weborg,

3
obiekt musi być obiektem File lub Blob, aby utworzyć adres URL obiektu for.see devdocs.io/dom/window.url.createobjecturl
— yxf

1
To jest mój kod dla obrazu: function myUploadOnChangeFunction () {if (this.files.length) {for (var i in this.files) {if (this.files.hasOwnProperty (i)) {var src = createObjectURL (this. pliki [i]); var image = new Image (); image.src = src; imagSRC = src; $ ('# img'). attr ('src', src); }}}}
— Hardik Mandankaa,

@HardikMansaraa Śmiało i edytuj to w swoim pytaniu.
— soktinpk

window.URL.createObjectURL('broken')zgłasza błąd:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
— Juan Mendes

Odpowiedzi:


160

AKTUALIZACJA

Rozważ unikanie createObjectURL()metody, podczas gdy przeglądarki wyłączają jej obsługę. Wystarczy dołączyć MediaStreamobiekt bezpośrednio do srcObjectwłasności HTMLMediaElementnp <video>. Elementu.

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

Jednakże, jeśli trzeba pracować z MediaSource, Bloblub File, trzeba stworzyć URL z URL.createObjectURL()i przypisać go do HTMLMediaElement.src.

Przeczytaj więcej szczegółów tutaj: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject


Starsza odpowiedź

Wystąpił ten sam błąd, kiedy przekazałem createObjectURLsurowe dane:

window.URL.createObjectURL(data)

To musi być Blob, Filelub MediaSourceobiektu, a nie same dane. To zadziałało dla mnie:

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

Sprawdź także MDN, aby uzyskać więcej informacji: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL


2
Cześć .. Co zrobić jeśli mam do czynienia z aplikacją / pdf? Otrzymuję ten sam błąd na konsoli, gdy mam do czynienia z plikiem PDF
— N Sharma

@mimo Używam tego samego kodu do pobierania pliku. Ale dwa pliki są pobierane. Jeden z nich to poprawny plik i jeden dodatkowy plik o tej samej nazwie, ale pobierany jest status błędu. Czy masz pojęcie, dlaczego tak się dzieje?
— Shardul

Jestem zdezorientowany tym komentarzem, w MDN odradza używanie URL.createObjectURL()dla strumieni multimedialnych. Jednak nie stwierdza, aby NIE używać go do wejścia do pliku, jak stwierdzono w pierwszym pytaniu.
— alextrastero

144

Ten błąd jest spowodowany createObjectURLwycofaniem tej funkcji z przeglądarki Google Chrome

Zmieniłem to:

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

do tego:

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

To zadziałało dla mnie.



Obiekt createObjectURL nie jest przestarzały, jak pokazano tutaj, ale nie akceptuje już obiektu strumienia multimediów
— goodies4uall

To powinna być odpowiedź.
— DomingoR

jest jeszcze jeden problem. video.play () wydaje się być ograniczone: DOMException: play () można zainicjować tylko gestem użytkownika.
— user889030

@ user889030 oznacza to po prostu, że nie możesz otworzyć strony internetowej i oczekiwać, że rozpocznie się strumień z kamery internetowej. Musisz pozwolić użytkownikowi jawnie rozpocząć transmisję. Wystarczy użyć przycisku, aby rozpocząć transmisję
— S.Ramjit

27

Mój kod został uszkodzony, ponieważ używałem przestarzałej techniki. Kiedyś tak było:

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

Potem zastąpiłem to tym:

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

To działało pięknie.

EDYCJA: Ostatnio localMediaStreamzostał wycofany i zastąpiony przez MediaStream. Najnowszy kod wygląda następująco:

video.srcObject = new MediaStream();

Bibliografia:

  1. Przestarzała technika: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
  2. Nowoczesna przestarzała technika: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. Nowoczesna technika: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

9

Miałem ten sam błąd dla MediaStream. Rozwiązaniem jest ustawienie strumienia na srcObject.

Z dokumentów :

Ważne: Jeśli nadal masz kod, który opiera się na funkcji createObjectURL () w celu dołączania strumieni do elementów multimedialnych, musisz zaktualizować kod, aby po prostu ustawić srcObject bezpośrednio na MediaStream.



3

Problem polega na tym, że klucze podane w pętli nie odnoszą się do indeksu pliku.

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

Wynik powyższego kodu to:

0
length
item

Ale oczekiwano:

0
1
2
etc...

Następnie błąd pojawia się, gdy przeglądarka próbuje wykonać, na przykład:

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

Proponuję implementację w oparciu o poniższy kod:

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

Mam nadzieję, że to komuś pomoże.

Pozdrowienia!


2

Jeśli korzystasz z AJAX, możesz dodać opcje xhrFields: { responseType: 'blob' }:

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.