php blob:上传图片,上传图片，预览并保存成blob类型 和 base64

场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：

方法一：利用URL.createObjectURL()

base

　　

window.onload = function () {

let $img = document.getElementById('img')

file.onchange = function (e) {

console.log(e.target.files[0])

let file = e.target.files[0]

let fileUrl = window.URL.createObjectURL(file)

$img.src = fileUrl

img.onload = function () {

// 手动回收

URL.revokeObjectURL(fileUrl)

}

}

}

当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。

方法二: 利用FileReader.readAsDataURL()

base

　　　　

window.onload = function () {

let $img = document.getElementById('img')

file.onchange = function (e) {

console.log(e.target.files[0])

let file = e.target.files[0]

const fr = new FileReader(file)

fr.readAsDataURL(file)

fr.onload = function () {

$img.src = this.result

}

}

}

img标签的src将会是像这样："data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==，能够正常显示。