前端头像上传功能实现之base64图片/头像上传详细解析2【扩展知识FileReader对象】

将图片变成base64字符串
base64是一种数据格式就是一个字符串可以当图片来使用

// base64之将图片在前端变为base64格式

1.先获取图片
2.FileReader对象将图片进行转换（转成base64格式）
屁话不多说强行上代码看官勿笑

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="file" id="file"><button id="cs">上传</button><img src="" alt="" id="x">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>// base64将图片变成base64字符串// base64是一种数据格式 就是一个字符串可以当图片来使用// base64之将图片在前端变为base64格式// 1.先获取图片// 2.FileReader对象将图片进行转换cs.onclick = function () {var file = document.querySelector("#file").files[0]console.log(file);// 内置构造函数的方式创建一个FileReader对象var fileReader = new FileReader()console.log("fileReader→",fileReader);// fileReader.readAsDataURL(file)这个方法是把列表清单里面的信息转化成base64,参数为file是列表清单信息fileReader.readAsDataURL(file)// fileReader.onload事件是等fileReader.readAsDataURL(file)转化为base64结束后监听的一个异步的回调函数fileReader.onload = function () {// 异步回调函数当中,fileReader.result就是转化后的base64字符,可以直接用在img标签的src属性上console.log("图片转化完毕！");// 其中内部的fileReader.result可以换成this(this指向问题)console.log("转换结果！",fileReader.result);$("#x").attr("src",fileReader.result)}}
</script></html>

FileReader
FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
创建实例
var reader = new FileReader();

二进制数据上传
HTML5体系的建立引入了一大堆新的东西，基于XHR2，我们可以直接上传或下载二进制内容，无需像以往一样通过form标签由后端拉取二进制内容。
简单整理下上传逻辑：
1、通过input[type=“file”]标签获取本地文件File对象
2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
3、创建xhr对象，配置请求信息
4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
代码实现如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){var file = this.files[0];if(!!file){var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function(){var binary = this.result;upload(binary);}}
}//文件上传
function upload(binary){var xhr = new XMLHttpRequest();xhr.open("POST", "http://xxxx/opload");xhr.overrideMimeType("application/octet-stream");//直接发送二进制数据if(xhr.sendAsBinary){xhr.sendAsBinary(binary);}else{xhr.send(binary);}// 监听变化xhr.onreadystatechange = function(e){if(xhr.readyState===4){if(xhr.status===200){// 响应成功       }}}
}

总结
本篇主要介绍了FileReader对象的属性及应用场景，有了FileReader，我们可以将本地文件读取到内存中。文中我们提到了ArrayBuffer和类型化数组的概念，这使得我们可以在内存中进一步操作二进制数据，关于这部分内容，会在之后的博客中进行归纳。