使用fileReader的一个坑及解决

调用fileReader对象的readAsText()方法读取文件内容时，有时会遇到编码问题，导致无法正常读取文件内容的情况。本文将详细讲解使用fileReader的一个坑及解决方法。

问题描述

当fileReader对象读取文件内容时，有时会遇到编码问题，导致无法正确读取文件内容。

示例1

var reader = new FileReader();
reader.readAsText(file);
console.log(reader.result);

在这个示例中，使用了readAsText()方法将file读入内存，并打印出来。但是这个方法有一个默认的编码方式，如果读取的文件编码不是默认编码，就会出现乱码的情况。

解决方案

一种解决方案是指定编码方式。例如，在UTF-8编码的情况下：

var reader = new FileReader();
reader.readAsText(file, "UTF-8");
console.log(reader.result);

使用了readAsText()方法，并指定了文件的编码方式为UTF-8。这种方法能够解决编码问题，使得文件能够正常读取。

示例2

现在假设你的应用程序中需要将多个文件按照指定格式合并成一个文件，你可以使用fileReader对象中的readAsArrayBuffer()方法读取每一个文件的内容，然后通过ArrayBuffer对象的slice()方法合并到一个新的ArrayBuffer对象中，最后再转化为Blob对象后上传到服务器。

var files = document.getElementById('fileUpload').files;
var fileBuffers = [];

for (var i = 0; i < files.length; i++) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(files[i]);

    reader.onload = function (event) {
        var fileBuffer = event.target.result;
        fileBuffers.push(fileBuffer);
    }
}

//进行合并并上传处理
function upload() {
    var blob = new Blob(fileBuffers);
    var formData = new FormData();
    formData.append("file", blob, "newfile.txt");

    //使用ajax上传
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.onreadystatechange = function (event) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(formData);
}

注意，示例中使用了readAsArrayBuffer()方法来读取文件内容。此方法可以正确读取二进制文件，包括图片、视频、音频等。组合出来的文件数据不受编码影响，是一个二进制的数据缓存，可以直接操作字节数据，非常适合上传二进制文件。

总结

使用fileReader对象读取文件时，需要注意文件的编码方式。如果使用的readAsText()方法，要注意为读取的文件指定编码方式。如果读取的是二进制文件，可以使用readAsArrayBuffer()方法，并使用ArrayBuffer对象的slice()方法将多个二进制文件组合成一个新的ArrayBuffer对象，再将其转化为Blob对象上传到服务器。这样可以方便地实现上传多个文件并合并成一个新文件的功能。