# 背景
最近写网页的时候遇到了一个问题，我数据是跨域获取，所以当我上传图片操作预览图片时，按照MVC模式的网页写法是图片上传成功后通过回调函数接收图片地址然后在网页中展示，因为可行，所以在此之前也没有去在意处理预览区不满意图片时的代价，不满意的图片将再调用控制器方法将其删除，如果图片信息入库而又不满意预览区图片的话，将会有两次无意义的服务器资源消耗，这仅仅是一个浏览器窗口在该页进行的一次上传操作，假如成千上万的浏览器在进行此操作呢？这是其一。正如我遇到的问题一样，存在数据与网页不同源问题，所以返回来的图片地址还有同源策略的限制，又要有一系列的处理。
# 实现思路
思路就是用js将用户触发input的onChange事件时将图片在浏览器渲染展示，再进行服务器上传图片，而不是先上传服务器再展示。这里介绍一下功能核心FileReader对象
1. FileReader对象
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob对象指定要读取的文件或数据。其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 Data Transfer对象,还可以是来自在一个HTML CanvasElement上执行mozGetAsFile()方法后返回结果。FileReader 对象有很多事件处理和方法，这里只介绍本案例使用到的事件处理和方法。
事件处理
FileReader.onload：处理load事件。该事件在读取操作完成时触发。
方法
FileReader.readAsDataURL方法：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。用这个方法读取我们上传的文件。
属性
FileReader.result(只读属性)：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。本案例中我们图片的src就是通过该属性读取。
2. 代码实现
//html部分
//我这里是在vue中的onchange事件写法，这里onchange事件一定要书写正确。
<input type="file" @change="uploads" accept="image/jpg,image/png,image/jpeg,image/bmp">
// 展示图片区域
<div id="showpic" style="margin-top:1em"></div>
// js部分
uploads (e) {
const dir = e.target.files[0];//获取到当前文件对象
this.file = dir
var reader = new FileReader()
//将文件以Data URL形式读入页面
reader.readAsDataURL(this.file);
reader.onload = function(ete){
var result = document.getElementById("showpic");
//显示文件
result.innerHTML='<img id="Pic" src="' + this.result +'" alt="" style="width:400px; height=300px" />';
}
}
