原生js实现上传图片并预览

1.FileReader对象简介

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。
readAsBinaryString：该方法将文件读取为二进制字符串，通常发送给后端来存储
readAsDataURL：该方法是将文件转成base64格式的字符串
2. FileReader事件处理函数

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	成功时触发
onloadend	读取完成时触发,无论成功还是失败
onloadstart	读取开始时触发
onprogress	读取中

例子

html部分

<input type="file" onchange="changeFn()" class="fileArea" hidden >
<button class="btn"  name="nn" id="btnn">预览</button>
<button onclick="upload()">上传</button>

<div>
	<img src="" alt="图片预览" class="image" >
</div>

js部分

const file = document.querySelector('.fileArea')
function lookImg(){
	file.click()
}
let img
let res = null 
const whiteList = ['image/png','image/jpg','image/gif','image/jpeg']
function changeFn(){
	res = file.files[0]
	if (!res) return
	if (!whiteList.includes(res.type)) {
		return console.log('请选择图片类型');
	}
	let reader = new FileReader()
	reader.readAsDataURL(res)
	reader.onload = function(e){
		img = e.target.result 
		document.querySelector('.image').src = e.target.result
		file.value = null // 处理不能上传同一个图片
		}
	}
function upload(){
	if (!img) return console.log('停');
	// 发请求 ...
	console.log('成功');
}