blob 临时地址url 转 blob 对象或 file 文件

Question

请教 blob 临时地址url（如：blob:http://192.168.1.14:3200/4aa3%E2%80%A6%E2%80%A6） 转成 blob 对象或 file 文件（是视频非图片）！尝试许久无果，求经验解答

Answer 1

@Liz 下午好🌅🌅🌅
本答案参考通义千问

Blob URL 是一个指向浏览器本地缓存的二进制数据的链接，它并不是可以直接转换为 Blob 对象或 File 对象的。但是，你可以通过以下步骤将 Blob URL 转换为实际的文件或 Blob 对象：

1. 使用 fetch 或 XMLHttpRequest 获取 Blob 数据：

   • 使用 fetch API 可以更简洁地获取数据：

   fetch('blob:http://192.168.1.14:3200/4aa3%E2%80%A6%E2%80%A6')
     .then(response => response.blob())
     .then(blob => {
       // 现在你有了一个 Blob 对象
       // 可以将其转化为File对象或使用其他操作
     });
   

   • 如果你使用的是旧版本的浏览器，可以使用 XMLHttpRequest：

   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'blob:http://192.168.1.14:3200/4aa3%E2%80%A6%E2%80%A6', true);
   xhr.responseType = 'blob';
   xhr.onload = function() {
     if (xhr.status === 200) {
       var blob = xhr.response;
       // ...处理blob对象
     }
   };
   xhr.send();
   

2. 将 Blob 对象转换为 File 对象：

   • 使用 FileReader 对象：

   var reader = new FileReader();
   reader.readAsArrayBuffer(blob);
   reader.onload = function() {
     var file = new File([reader.result], 'filename.mp4', {type: 'video/mp4'});
     // ...处理file对象
   };
   

3. 保存到本地或上传：

   • 保存到本地：

   saveAs(file, 'filename.mp4');
   

   • 上传到服务器：

   var formData = new FormData();
   formData.append('file', file);
   // 发送POST请求...
   

注意：Blob URL 的有效期可能很短，如果需要长期保存，最好在服务器端创建一个持久的存储位置，并返回该位置的 URL。