【笔记】JS中的File和Blob

发表于 更新于 阅读次数：

前言

JS中的File和Blob

File

创建File对象

<text>：文件内容
<filename>：文件名

1
var file = new File(["<text>", "<filename>"]);

获取字节数组

1
file.arrayBuffer();

读取文件

1
2
3
4
5
var fileReader = new FileReader();
fileReader.onload = function(event) {
    console.log(fileReader.result);
}
fileReader.readArrayBuffer(file);
1
2
3
4
5
var fileReader = new FileReader();
fileReader.onload = function(event) {
    console.log(event.target.result);
}
fileReader.readArrayBuffer(file);

Blob

创建Blob对象

<text>：文件内容

1
var blob = new File(["<text>"]);

获取字节数组

1
blob.arrayBuffer();

获取字符串

1
blob.text();

修改字节数据

获取DataView对象

1
var dataView = new DataView(await blob.arrayBuffer());

根据字节地址查看字节

<index>：字节地址

1
dataView.getUint8(<index>);

根据字节地址修改字节

<index>：字节地址
<value>：修改后的字节值

1
dataView.setUint8(<index>, <value>);

通过浏览器获取文件

通过input标签

1
2
3
4
5
6
7
<input type="file" onchange="fun(event)">

<script>
    const fun = function(event) {
        console.log(event.target.files[0]);
    }
</script>

通过拖拽

1
2
3
4
5
6
7
8
9
10
11
<div style="width: 100px; height: 100px; background-color: red;" ondrop="fun1(event)" ondragover="fun2(event)"></div>

<script>
    const fun1 = function(event) {
        event.preventDefault();
        console.log(event.dataTransfer.files[0]);
    }
    const fun2 = function(event) {
        event.preventDefault();
    }
</script>

通过Fetch

accept：允许选择的文件类型

1
2
3
4
5
6
7
8
9
10
11
12
<input type="button" onclick="fun()">

<script>
    const fun = function() {
        fetch("./index.json").then(function(response) {
            return response.blob();
        }).then(function async (result) {
            console.log(result.text());
            console.log(result.arrayBuffer());
        });
    }
</script>

通过showOpenFilePicker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button onclick="fun()"></button>

<script>
    async function fun() {
        const pickerOpts = {
            types: [
                {
                    description: "Images",
                    accept: {
                        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
                    },
                },
            ],
            excludeAcceptAllOption: true,
            multiple: false,
        };
        let fileHandle;
        [fileHandle] = await window.showOpenFilePicker(pickerOpts);
        const file = await fileHandle.getFile();
        console.log(await file.arrayBuffer());
    }
</script>

通过filePicker操作文件

创建文件

1
2
3
4
5
6
7
8
<button onclick="fun()"></button>

<script>
    async function fun() {
        const fileHandle = await window.showSaveFilePicker();
        console.log(fileHandle);
    }
</script>

打开文件

1
2
3
4
5
6
7
8
9
10
<button onclick="fun()"></button>

<script>
    async function fun() {
        const [fileHandle] = await window.showOpenFilePicker();
        const file = await fileHandle.getFile();
        const result = await file.text();
        console.log(result);
    }
</script>

保存文件

  • 打开文件，写入文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button onclick="fun()"></button>

<script>
    const text = "test";

    async function fun() {
        // 打开文件
        const [fileHandle] = await window.showOpenFilePicker();
        // 保存文件
        const stream = await fileHandle.createWritable();
        await stream.write(text);
        await stream.close();
    }
</script>

另存为文件

  • 新建文件，写入文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button onclick="fun()"></button>

<script>
    const text = "test";

    async function fun() {
        // 新建文件
        const fileHandle = await window.showSaveFilePicker();
        // 保存文件
        const stream = await fileHandle.createWritable();
        await stream.write(text);
        await stream.close();
    }
</script>

URL

  • 得到的URL可以通过地址栏在浏览器访问，但是不能通过a标签跳转页面

DataURL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="button" onclick="fun()">

<script>
    const fun = function () {
        fetch("./index.json").then(function (response) {
            return response.blob();
        }).then(function async(result) {
            const fileReader = new FileReader();
            fileReader.onload = function (event) {
                console.log(event.target.result);
            };
            fileReader.readAsDataURL(result);
        });
    }
</script>

BlobURL

1
2
3
4
5
6
7
8
9
10
11
12
<input type="button" onclick="fun()">

<script>
    const fun = function () {
        fetch("./index.json").then(function (response) {
            return response.blob();
        }).then(function async(result) {
            const res = URL.createObjectURL(result);
            console.log(res);
        });
    }
</script>

操作目录

打开目录

entry.name：子级文件或目录名
entry.kind：子级文件或目录类型

file：文件类型
directory：目录类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button onclick="fun()"></button>

<script>
    async function fun() {
        const directoryHandle = await window.showDirectoryPicker();
        console.log(directoryHandle);
        const entries = await directoryHandle.values();
        for await (const entry of entries) {
            console.log(entry);
            console.log(entry.name);
            console.log(entry.kind);
        }
    }
</script>

文件上传

  • 通过Fetch发送请求实现文件上传
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button onclick="fun()"></button>

<script>
    async function fun() {
        const fileHandle = await window.showOpenFilePicker();
        const file = await fileHandle.getFile();
        const formData = new FormData();
        formData.append("file", file, "filename.txt");
        await fetch("/", {
            body: formData
        }).then(function (response) {
            console.log(response);
            return response.json();
        })
    }
</script>

完成

参考文献

哔哩哔哩——全栈码叔
mozilla