# 图片上传预览

业务中经常有上传图片的需求在，有时我们需要去尽快预览要上传的图片，此时会有一些常见的方案：

# FileReader.readAsDataURL

# 过程

• 选择文件之后，通过 FileReader.readAsDataURL 将文件变为 base64，通过链接的形式直接引用，会依据垃圾回收机制进行回收。

# 缺点

• base64 内存占用大

# 优点

• 无跨域问题

# URL.createObjectURL

# 过程

• 直接返回，同步执行，会为文件或数据 (图片等) 创建一个内存地址（blob:https:xxx），存储在 document 中，并且不会被垃圾回收机制所回收。清除方式只有 unload 事件或 revokeObjectURL 进行手动清除。

# 缺点

• 同源策略保护
• 大小受浏览器内存限制

# 请求解析

• 将文件二进制数据放到一块内存缓冲区
• 生成 uuid、拼接为一个 blob url
• 注册 blob url 到 url 注册表中
• 返回 blob url、图片加载 blob url
• 网络线程拦截 blob 协议，通过注册表找到地址
• 将数据附加到图片上