美文网首页
文件上传后读取文件内部内容

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

作者: yanmingfei | 来源:发表于2020-03-24 16:12 被阅读0次

上传文件

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

解析文件内容

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

<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进行,固定的编码读取文件,至此即可。

相关文章

网友评论

      本文标题:文件上传后读取文件内部内容

      本文链接:https://www.haomeiwen.com/subject/gigoyhtx.html