URL.createObjectURL上传图片生成blob预览链接

上传图片时，一般先让用户预览图片。现在通过URL.createObjectURL方法可以非常简单地获取一个blob的预览图片url。而不需要把文件转为base64或者其他的方法。它在各个主流浏览器也都兼容。

下面用简单的例子实现一个上传图片预览效果

<input
    type="file"
    accept="image/*"
    capture
    onchange="inputChanged(event)"
/>

先需要一个type为file类型的input，这里设置了accept="image/*"和capture可以支持手机端直接拍照获得图片。

这里定义了onchange事件，我们用URL.createObjectURL方法就在这里实现。

<script>
function inputChanged(e) {
    // 获取文件
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    // 检查文件类型为图片
    if (!file.type.match(pattern)) {
        return;
    }
    // 生成blob url
    var imgDataURL = URL.createObjectURL(file);
    // 修改图片src属性预览图片
    document.getElementById("img").src = imgDataURL;
}
</script>

简单几行代码就能实现图片预览了。

浏览器兼容性

https://caniuse.com/?search=createObjectURL

注意：创建的 blob url 不能用作对象或 iframe src

如果是预览pdf，目前存在已经的问题：

Internet Explorer 间歇性地无法通过此方法加载图像。 PDF.js 改用了数据 URL。（https://github.com/mozilla/pdf.js/issues/3977）

在另一个选项卡中打开 Blob URL 时，iOS 上的 Chrome 似乎有问题，请参阅解决方法（https://stackoverflow.com/questions/24485077/how-to-open-blob-url-on-chrome-ios）。 Samsung Internet 也会出现同样的问题。

Safari 对类型为 application/octet-stream 的 blob 存在严重问题。