Не удалось сохранить / загрузить объект данных блоба браузера

Question

У меня есть веб-страница, на которой пользователь загружает видеофайл с помощью html-тега "input type = file". Я перехватываю загруженный видеофайл в переменную функции JavaScript, где он указывается в виде URL-адреса BLOB-объекта. "blob: https://www.myownsite.com:8080/2e8cfd32-abf2-4db3-b396-91f76cc3b40c". Я не могу сохранить этот BLOB-URL в моей системе.

HTML код:

<input type="file" name="video_file_name" accept="video/*">
<input type="submit" value="Upload Video" id="customVideoSubmit">
<button onClick="postVideo();" id="customVideoSubmit" aria- hidden="true">Upload Video</button>

Код JavaScript:

    function postVideo(){
    var blobURL = document.querySelector('video').src;
}

Переменная blob URL содержит следующий URL-адрес BLOB-объекта, который правильно воспроизводит видео, если я поместил его на отдельную вкладку этого браузера.

blob:https://www.myownsite.com:8080/2e8cfd32-abf2-4db3-b396-91f76cc3b40c

Как я могу сохранить этот видеофайл в моей системе. Я пробовал несколько методов JavaScript, а также методы back-end в моем коде Perl, как

decode_base64($cgi->{blobURL}) ;

Ничего не работает, хотя. Любая помощь будет высоко ценится.

Answer 1

Чтобы преобразовать Blob URL к Blob в POST на сервер вы можете использовать fetch() а также Response.blob()

const blobURL = URL.createObjectURL(new Blob([123]));
fetch(blobURL)
.then(response => response.blob())
.then(blob => {
  // do stuff with `blob`: `Blob`
  console.log(blob);
});