如何通过JavaScript将Blob URL转换为Blob对象？

要把Blob URL转换成对应的Blob对象，最直接的方法是利用浏览器的fetch() API请求这个URL，再从响应中提取Blob。下面是具体实现和使用场景说明：

核心转换函数 #

async function convertBlobUrlToBlob(blobUrl) {
  try {
    const response = await fetch(blobUrl);
    if (!response.ok) {
      throw new Error('请求Blob URL失败');
    }
    return await response.blob();
  } catch (err) {
    console.error('转换过程出错:', err);
    return null;
  }
}

在你的代码中批量转换 #

假设你已经通过originFiles数组存储了Blob URL，想要批量转换成Blob对象，可以这样处理：

// 批量转换所有Blob URL为Blob对象
const blobConversionPromises = originFiles.map(url => convertBlobUrlToBlob(url));

Promise.all(blobConversionPromises).then(blobObjects => {
  // blobObjects就是转换后的Blob数组，这里可以处理你的业务逻辑
  console.log('转换完成的Blob对象:', blobObjects);
});

额外优化：避免重复转换 #

看了你的代码，其实在autoCropImage的回调里已经拿到了Blob对象（参数里的blob），甚至初始的files[i]本身就是File对象（File是Blob的子类）。如果你的需求是获取原始文件的Blob，完全可以在这个阶段直接保存，不需要后续从Blob URL再转换，这样更高效：

for (var i = 0; i < files.length; i++) { 
  var imagefile_url = window.URL.createObjectURL(files[i]); 
  originFiles.push(imagefile_url); 
  imageFiles[i] = new Promise(resolve =>{ 
    _this.autoCropImage(imagefile_url, function(imgData, blob){ 
      // 直接保存原始File/Blob对象，省去后续转换步骤
      resolve({
        blobOBJ: blob, 
        cropped: imgData,
        originalFile: files[i] // files[i]本身就是File（Blob子类）
      }); 
    }); 
  }) 
} 

注意事项 #

• Blob URL是浏览器内部生成的临时地址，当页面卸载或者调用URL.revokeObjectURL(blobUrl)后，这个URL就会失效，所以要确保在转换时URL仍然有效。
• 因为fetch()是异步操作，所以需要用async/await或者Promise链式调用处理结果。

内容的提问来源于stack exchange，提问作者Champer Wu