ไม่สามารถเรียกใช้งาน 'createObjectURL' บน 'URL':

แสดงด้านล่างข้อผิดพลาดใน Safari

ไม่สามารถเรียกใช้งาน 'createObjectURL' บน 'URL': ไม่พบฟังก์ชันที่ตรงกับลายเซ็นที่ให้ไว้

รหัสของฉันคือ:

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); 
            }
       }           
   } 
} 

UPDATE

พิจารณาหลีกเลี่ยงcreateObjectURL()วิธีการในขณะที่เบราว์เซอร์ปิดใช้งานการสนับสนุน เพียงแนบMediaStreamวัตถุโดยตรงกับsrcObjectคุณสมบัติขององค์ประกอบHTMLMediaElementเช่น<video>

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

แต่ถ้าคุณต้องทำงานร่วมกับMediaSource, BlobหรือFileคุณต้องสร้าง URL ที่มีและกำหนดให้URL.createObjectURL()HTMLMediaElement.src

อ่านรายละเอียดเพิ่มเติมได้ที่นี่: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

คำตอบที่เก่ากว่า

ฉันพบข้อผิดพลาดเดียวกันเมื่อฉันส่งผ่านไปยังcreateObjectURLข้อมูลดิบ:

window.URL.createObjectURL(data)

มันจะต้องมีBlob, FileหรือMediaSourceวัตถุที่ไม่ใช่ข้อมูลเอง สิ่งนี้ใช้ได้กับฉัน:

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

ข้อผิดพลาดนี้เกิดขึ้นเนื่องจากฟังก์ชันcreateObjectURLเลิกใช้งานสำหรับ Google Chrome

ฉันเปลี่ยนสิ่งนี้:

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

สำหรับสิ่งนี้:

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

สิ่งนี้ใช้ได้สำหรับฉัน

รหัสของฉันเสียเพราะฉันใช้เทคนิคที่เลิกใช้แล้ว มันเคยเป็นเช่นนี้:

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

จากนั้นฉันแทนที่ด้วยสิ่งนี้:

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

มันทำงานได้อย่างสวยงาม

แก้ไข: เมื่อเร็ว ๆ นี้ได้รับการคัดค้านและแทนที่ด้วยlocalMediaStream MediaStreamรหัสล่าสุดมีลักษณะดังนี้:

video.srcObject = MediaStream;

อ้างอิง:

1. เทคนิคที่เลิกใช้: https://developer.mozilla.org/en-US/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

ฉันมีข้อผิดพลาดเดียวกันสำหรับ MediaStream การแก้ปัญหาคือการตั้งค่ากระแสเพื่อ srcObject

จากเอกสาร :

สำคัญ: หากคุณยังมีรหัสที่ต้องใช้ createObjectURL () เพื่อแนบกระแสข้อมูลกับองค์ประกอบสื่อคุณต้องอัปเดตรหัสของคุณเพื่อตั้งค่า srcObject เป็น MediaStream โดยตรง

วิดีโอพร้อมถอยกลับ:

try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}
video.play();

จาก: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

ปัญหาคือว่ากุญแจที่ให้ไว้ในวงไม่ได้อ้างถึงดัชนีของไฟล์

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);
    ...
}

ฉันหวังว่านี่จะช่วยคนได้

ทักทาย!

หากคุณกำลังใช้ 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);
  }
});

ฉันแก้ไขการดาวน์โหลดเวอร์ชันล่าสุดจาก GgitHub GitHub url