js 文件转base64|极客笔记

js 文件转base64

在前端开发中，我们经常会遇到需要将文件转换成base64的情况，比如图片、音视频等文件。base64是一种用64个字符表示二进制数据的方法，可以将文件内容直接嵌入到代码中，减少HTTP请求次数，提高网站性能。本文将详细介绍如何将js文件转换成base64。

1. 使用 FileReader API

在现代浏览器中，我们可以使用FileReader API来读取文件内容，并转换成base64格式。以下是一个简单的示例代码：

const fileInput = document.querySelector('input[type="file"]');
const fileReader = new FileReader();

fileInput.addEventListener('change', function() {
    const file = fileInput.files[0];

    fileReader.onload = function(event) {
        const base64String = event.target.result;
        console.log(base64String);
    };

    fileReader.readAsDataURL(file);
});

在上面的代码中，我们通过选择一个文件后，将文件读取成base64格式，并打印出来。在实际开发中，我们可以根据需求将base64字符串传递给后端接口或者直接使用。

2. 使用 Fetch API

除了使用FileReader API，我们还可以使用Fetch API来请求js文件，然后将文件内容转换成base64格式。以下是一个示例代码：

fetch('example.js')
    .then(response => response.blob())
    .then(blob => {
        const fileReader = new FileReader();
        fileReader.onload = function(event) {
            const base64String = event.target.result;
            console.log(base64String);
        };
        fileReader.readAsDataURL(blob);
    });

在上面的代码中，我们使用Fetch API请求了一个js文件，并将文件内容转换成base64格式。这种方式适用于需要动态加载js文件，并将其转换成base64的场景。

3. 使用 Webpack

如果你正在使用Webpack来打包你的前端项目，你也可以在Webpack配置中进行相应的设置，将js文件转换成base64格式。以下是一个示例的Webpack配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'base64-loader'
            }
        ]
    }
};

在上面的配置中，我们使用base64-loader来将js文件转换成base64格式。这样打包后的代码中，js文件的内容将以base64的形式嵌入到打包后的代码中。