鉴于个人认为网上各种文章对于二进制处理讲的过于啰嗦,做一下总结,看不懂的再去参考其它文章
javascript 以前不支持处理二进制的,不知何时(自已去查)开始支持了,涉及的对象有以下几个:
1. Blob: 二进制数据类型的一个封装
2. File: 继承自Blob,多了一个属性, input file 对象的 files 属性的上传文件就是一个File对象
3. FileReader: 用于读取 Blob 对象(还有没有其它功能,还没用过),通过 read 相关的方法 和 onload 事件异步读取一个Blob对象
4. Int8Array, Uint8Array, Int16Array, Int32Array 等二进制数组
5. ArrayBuffer: 一种内存文件形式,属于Blob中数据存储成员类型,继承了 Int8Array, Uint8Array, Int16Array, Int32Array
6. DataView: 用来读取 ArrayBuffer
下面是我用于文件上传时转base64的一个demo
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
// <![CDATA[
function toBase64(arrayBuffer) {
var binary = '';
var bytes = new Uint8Array(arrayBuffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
function Button1_onclick() {
var file = File1.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (p) {
if (p.target.readyState == FileReader.DONE) {
var dataView = new DataView(p.target.result);
var count = dataView.byteLength;
var byteData = dataView.getUint8(0); //读取第一个字节
var bytes = new Uint8Array(p.target.result); //直接将结果转换成一个字节数组
var base64 = toBase64(p.target.result);
console.log(base64);
}
};
reader.onerror = function () {
console.log('读取失败');
console.log(reader.error);
}
}
// ]]>
</script>
</head>
<body>
<input id="File1" type="file" />
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</body>
</html>
/文件上传提交部分代码示例:
var formData = new FormData();
formData.append("file", file);
uploadSocityImage(formData).then(result => {
var fileReader = new FileReader();
fileReader.onload = (e) => {
this.imageList.push({ name: result.data, url: e.target.result });
};
fileReader.readAsDataURL(file);
});
接收文件流为文件:
var promise = new Promise((resolve, reject) => {
getImages(imageName).then(imageResult => {
if (!imageResult)
return;
var fileReader = new FileReader();
fileReader.onload = (e) => {
imageItem.url = e.target.result;
imageItem.file = new File([imageResult], imageName) ;
resolve(null);
};
fileReader.readAsDataURL(imageResult);
});
});