js图片前端预览,有2种方法:
- FileReader
- window.URL.createObjectURL
FileReader 例子
vue 使用 element-ui 的代码:
change (e) {
let _this = this
var file = e.target.files[0]
if (!e.target.value) {
return false
}
if (!/.(jpg|png|JPG|PNG)$/.test(e.target.value)) {
this.$message('图片类型必须是.jpg、.png中的一种')
return false
}
if (typeof FileReader === 'function') {
var reader = new FileReader()
reader.onload = (event) => {
_this.idPicSrc = reader.result
}
reader.readAsDataURL(file)
} else {
alert('Sorry, FileReader API not supported')
}
}
window.URL.createObjectURL 例子
change (e) {
let _this = this
var file = e.target.files[0]
if (!e.target.value) {
return false
}
if (!/.(jpg|png|JPG|PNG)$/.test(e.target.value)) {
this.$message('图片类型必须是.jpg、.png中的一种')
return false
}
var src = window.URL.createObjectURL(file) // src:就是要设置图片的 src 地址
}
FileReader.readAsDataURL():将文件转化为base64编码字符串
该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成(DONE),并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
出处:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL