文件上传后读取文件内部内容

上传文件

上传文件，是很普通的事情。那么上传文件并且读取文件的内部内容。这个时候要怎么解决？

解析文件内容

解析文件内部内容，也是很简单，不过会出现乱码的可能。

<input type="file" id="file">
 var ofile = document.getElementById('file')

ofile.onchange = function(e){
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onloadend = e => {
      console.log(e.target.result)          
    };
}

乱码处理

原因

为什么会出现乱码，原因就是不同的软件，不同的系统，默认的编码设置不同。
而readAsText(file)，在读取文件时，虽然我们没有设置编码，但是默认是utf8编码来读取
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsText

解决

也就是说只要知道文件的编码格式，并用这个编码格式去读取这个文件就可以了

获取编码格式

1.npm上有一个库jschardet是利用js来获取文件的编码，虽然有一些偏差，但是能够满足需求。
jschardet.detect(buffer)这个方法可以解决问题。注意它的参数是buffer。
2.如何保证读出来的内容不是乱码，那么readAsText是不可以取的方法。
3.综上两种方式，我们可以采用readAsArrayBuffer(blob)来读取文件。只有一个参数，不会默认指定编码。所以可以
4.将ArrayBuffer转换成buffer。再交给jschardet.detect()即可。

<input type="file" id="file">
 var ofile = document.getElementById('file')

ofile.onchange = function(e){
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = e => {
        const buffer = Buffer.from(e.target.result);
        const type = jschardet.detect(buffer)  // { encoding: "UTF-8", confidence: 0.9690625 }
    };
}

正确读取文件内容

iconv-lite可以指定编码格式来正确读取文件内容。

<input type="file" id="file">
 var ofile = document.getElementById('file')

ofile.onchange = function(e){
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = e => {
        const buffer = Buffer.from(e.target.result);
        const type = jschardet.detect(buffer)  // { encoding: "UTF-8", confidence: 0.9690625 }
        const res iconv.decode(buffer,type,encoding)//文件的内容，字符串形式。
    };
}

总结

1.读取文件不难，难在解码时有乱码。
2.切记慎用readAsText()方法
3.利用ArrayBuffer和Buffer的转换，以及jscharded来进行读取编码
4.再利用iconv-lite进行，固定的编码读取文件，至此即可。