js如何读取本地文件
一般前端实现文件上传的时候，都是给input增加onchange事件，然后在事件触发的时候拿到已经选中的文件，然后再调上传的接口，实现图片上传。
我遇到一个需求，需要选中当前网页中已经显示的图片，然后把这张图片上传。第一个反应是，在网页中建一个隐藏的input，然后给它一个默认值，然并卵，想要通过给input赋值，浏览器考虑到安全的因素，只能是手动去触发input，然后选文件。因此，此方法就不适用了。最后网上找到下面这种解决方法。
用XMLHttpRequest通过图片的src，可以拿到一个Blog文件，再通过new File转换一下就可以拿到文件，以下是实现代码：
let xhr = new XMLHttpRequest();
//fileUrl也可以是一个图片的base64值
xhr.open('GET', fileUrl, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
let myBlob = this.response;
let file = new File([myBlob], "1.png");
uploadFile(file);
}
};
xhr.send();
用以上的方法，可以在浏览器端实现本地文件的读取
js预览本地图片的实现方法
在一般的图片上传中需求中，有一些需求是需要在调上传接口之前就需要显示图片的，html5的FileReader可以实现这个需求：
function previewImage(file) {
let tip = '浏览器暂不支持！'
if (window.FileReader) { // html5方案
var fr = new FileReader();
fr.onload = function (e) {
var src = e.target.result; //src为图片的base64值
if (!validateImg(src)) {
alert(tip)
} else {
showPrvImg(src);
}
}
fr.readAsDataURL(file);
} else { // 降级处理
if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
alert(tip);
} else {
}
}
}