将图片变成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和类型化数组的概念,这使得我们可以在内存中进一步操作二进制数据,关于这部分内容,会在之后的博客中进行归纳。