javascript 二进制处理

鉴于个人认为网上各种文章对于二进制处理讲的过于啰嗦，做一下总结，看不懂的再去参考其它文章

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);
                            });
                        });

 

posted on 2022-04-20 16:45  空明流光  阅读(415)  评论(0)  编辑  收藏  举报

导航