常规方案

使用FileReader以utf-8格式读取文件,根据文件内容是否包含乱码字符,来判断文件是否为utf-8。

如果存在,即文件编码非utf-8,反之为utf-8。

代码如下:

const isUtf8 = async (file: File) => {
return await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsText(file); reader.onloadend = (e: any): void => {
const content = e.target.result;
const encodingRight = content.indexOf("") === -1; if (encodingRight) {
resolve(encodingRight);
} else {
reject(new Error("编码格式错误,请上传 UTF-8 格式文件"));
}
}; reader.onerror = () => {
reject(new Error("文件内容读取失败,请检查文件是否损坏"));
};
});
};

该方法问题在于,如果文件非常大,比如几个G,浏览器读到的内容直接放在内存中,fileReader实例会直接触发onerror,抛出错误,有时浏览器会直接崩溃。

大文件方案

对于大文件,可以对文件内容进行抽样,对文件进行切片,这里使用100片。对切出的每片文件再切取前面1kb大小的片段,以string方式读取。如果1024B可能正好切在某个汉字编码的中间,导致以string方式读取时出错,即首尾可能出现,被认为是非utf-8片段。这时可以取1kb对应字符串的前半段,再去判断是否存在。

上述常数可以根据需求进行调整。

代码如下:

const getSamples = (file: File) => {
const filesize = file.size;
const parts: Blob[] = [];
if (filesize < 50 * 1024 * 1024) {
parts.push(file);
} else {
let total = 100;
const sampleSize = 1024 * 1024;
const chunkSize = Math.floor(filesize / total);
let start = 0;
let end = sampleSize;
while (total > 1) {
parts.push(file.slice(start, end));
start += chunkSize;
end += chunkSize;
total--;
}
}
return parts;
}; const isUtf8 = (filePart: Blob) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader(); fileReader.readAsText(filePart); fileReader.onload = (e) => {
const str = e.target?.result as string;
// 大致取一半
const sampleStr = str?.slice(4, 4 + str?.length / 2);
if (sampleStr.indexOf("�") === -1) {
resolve(void 0);
} else {
reject(new Error(编码格式错误,请上传 UTF-8 格式文件"));
}
}; fileReader.onerror = () => {
reject(new Error(文件内容读取失败,请检查文件是否损坏"));
};
});
}; export default async function (file: File) {
const samples = getSamples(file);
let res = true; for (const filePart of samples) {
try {
await isUtf8(filePart);
} catch (error) {
res = false;
break;
}
}
return res;
}

利用js判断文件是否为utf-8编码的更多相关文章

  1. js 判断文件是否存在(转载)

     js 判断文件是否存在(转载) var fso,s=filespec; // filespec="C:/path/myfile.txt"fso=new ActiveXObject ...

  2. 如何利用JS判断当前来路域名并跳转到指定页面

    1.如何利用JS判断当前来路域名并跳转到指定页面 获取当前请求路径var href = location.href ;if(href.indexOf("baidu")>-1) ...

  3. js判断文件是否存在的方法

    在做电力监控项目的时候,有一个需求就是左右布局的框架,点击左边的图形文件地址,然后去文件夹中找到文件,再在右边出现对应的图形文件,但是有些文件可能是配置的时候有问题,找不到文件,所以js需要判断,以下 ...

  4. js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...

  5. [转]客户端js判断文件类型和文件大小即限制上传大小

    原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...

  6. 利用javascript判断文件是否存在

    1 判断本地文件是否存在 var fso,s=filespec; // filespec="C:/path/myfile.txt" fso=new ActiveXObject(&q ...

  7. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. 利用JS判断浏览器种类

    现在浏览器很多,写代码的时候常常存在兼容性问题,所以判断用户使用的浏览器很重要.userAgent带有浏览器的种类及版本号等信息,所以可以通过userAgent属性来判断.一些冷门的浏览器,可以通过打 ...

  9. 利用JS判断当前来路域名并跳转到指定页面

    某网站绑定了多个域名,默认情况下访问这些域名的时候是指向网站的首页,也就是访问不同域名时看到的页面是一样的,现在需要访问不同域名时显示不同页面. 一般情况下,可以用子站绑定域名的方法来实现,访问不同的 ...

随机推荐

  1. 记一次go中map并发引起的事故

    错误使用map引发的血案 前言 场景复原 原因 参考 错误使用map引发的血案 前言 最近业务中,同事使用map来接收返回的结果,使用waitGroup来并发的处理执行返回的结果,结果上线之后,直接崩 ...

  2. HTTP/1.1、HTTP/2、HTTP/3 演变

    HTTP/1.1 相比 HTTP/1.0 提高了什么性能? 针对 HTTP/1.1 的性能瓶颈,HTTP/2 做了什么优化? HTTP/2 有哪些缺陷?HTTP/3 做了哪些优化? HTTP/1.1 ...

  3. 注册中心与API网关不是这样用的!

    之前在做顾问和咨询项目的时候,见到了一种非常经典的关于API网关和注册中心的错误用法.这个案例在我的星球里已经分享过,没想到最近又碰到了两个类似的使用姿势.也许这样的问题还存在不少团队的应用中,所以拿 ...

  4. 1- MySQL数据库基础快速入门

    我们进行不管是软件开发还是软件测试相关的职业的时候数据库必不可少:下面从数据库的概念开始了解,大家三四天的时间就可以完全掌握数据库的基本用法,然后多练习. 什么是数据,数据库 -数据是数据库中存储的基 ...

  5. UVA11174村民排队问题

    题意:      有n个人要排队,给你一些父子关系,要求儿子不能站在自己的父亲前面,问有多少种排队方式? 思路:       白书上的题目,首先我们可以把关系建成树,这样我们就有可能得到一个森林(或者 ...

  6. Linux-鸟菜-7-Linux文件系统-EXT

    Linux-鸟菜-7-Linux文件系统-EXT Linux最传统的磁盘文件系统(filesystem)使用的是EXT2,所以先从EXT2开始了解. /dev/sd[a-p][1-128]  为实体磁 ...

  7. Portswigger web security academy:XML external entity (XXE) injection

    Portswigger web security academy:XML external entity (XXE) injection 目录 Portswigger web security aca ...

  8. 一个或多个listeners启动失败,更多详细信息查看对应的容器日志文件

    碰到这个问题很多次,每次碰到都是去百度找.但是,不尽人意,好在最后还是解决了,所以写下总结. 报错内容: org.apache.catalina.core.StandardContext.startI ...

  9. 21.Quick QML-FileDialog、FolderDialog对话框

    1.FileDialog介绍 Qt Quick中的FileDialog文件对话框支持的平台有: 笔者使用的是Qt 5.8以上的版本,模块是import Qt.labs.platform 1.1. 它的 ...

  10. JavaScript中DOM与BOM的区别

    1.BOM BOM全称为Brower Object Model,中文翻译为浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口.通过BOM可以用来获取或设置 ...