JS 如何在客户端使用 file-type 检测文件类型？

在JavaScript中，要在客户端使用file-type来检测文件类型，首先需要引入file-type这个库。这个库可以帮助我们读取文件的二进制数据，并分析这些数据来确定文件的实际类型。以下是如何使用file-type库检测文件类型的步骤：

安装file-type库。如果你在使用的是现代前端项目，可能会使用npm或yarn来安装。可以运行以下命令来安装它：

bash
npm install file-type
# 或者
yarn add file-type

引入file-type模块。在你的JavaScript模块中，你可以使用import导入file-type。

javascript
import fileType from 'file-type';

读取文件。在浏览器中，通常我们可以通过<input type="file">来让用户选择文件，然后使用FileReader API读取这个文件的二进制数据。
使用file-type库来检测文件类型。file-type接受一个Buffer或Uint8Array，并返回一个包含文件类型信息的对象。

以下是一个完整的示例，展示了如何在浏览器中使用file-type来检测用户选择的文件类型：

html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Type Detection</title>
</head>
<body>

<input type="file" id="fileInput">

<script type="module">
    import fileType from 'file-type/browser';

    document.getElementById('fileInput').addEventListener('change', async (event) => {
        const file = event.target.files[0];
        if (!file) {
            console.log("No file selected!");
            return;
        }

        const arrayBuffer = await file.arrayBuffer();
        const typedArray = new Uint8Array(arrayBuffer);

        const result = await fileType.fromBuffer(typedArray);

        if (result) {
            console.log(`File type: ${result.mime}`);
            console.log(`File extension: ${result.ext}`);
        } else {
            console.log("Could not determine the file type.");
        }
    });
</script>

</body>
</html>

上面的代码中，我们首先在HTML文件中创建了一个文件输入元素。然后在JavaScript模块中，我们引入了file-type的浏览器版本，并为文件输入元素添加了change事件监听器。当用户选择文件时，我们读取这个文件的内容，将其转换为Uint8Array，然后使用file-type的fromBuffer方法分析这个数组，最终输出文件的类型信息。

需要注意的是，file-type版本更新可能会带来API的变化，因此在使用时需要参考当时最新的官方文档。

2024年6月29日 12:07 回复

1个答案

你的答案