【文件比较】前端上传文件和已有文件进行比较

需求:上传文件时比较已有文件是否存在,做出相应的操作;

1.小文件比较

内容比较:使用插件spark-md5,拿到文件的hash值,是一个字符串,然后和已有文件的hash进行比较即可;

javascript 复制代码
const fileToMD5 = (file: any) => {  
    return new Promise((resolve, reject) => {  
        const reader = new FileReader();  
        reader.onload = (e: any) => {  
            try {  
                const hash = SparkMD5.ArrayBuffer.hash(e.target.result);  
                resolve(hash);  
            } catch (error) {  
                reject(error);
            }  
        };  
        reader.onerror = (error) => {  
            reject(error);
        };  
        reader.readAsArrayBuffer(file);  
    });  
};

2.大文件

大文件稍微麻烦点,需要进行切片,然后在拿到hash,具体代码如下:

javascript 复制代码
const handlelargeFile = (file: any, callback: any) => {
    const reader = new FileReader();
    const chunkSize = 2097152; // 2MB
    let chunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;
    let spark = new SparkMD5.ArrayBuffer();
    const loadNext = () => {
        if (currentChunk < chunks) {
            const start = currentChunk * chunkSize;
            const end = Math.min(start + chunkSize, file.size);
            const blob = file.slice(start, end);
            reader.onload = (e: any) => {
                spark.append(e.target.result);
                currentChunk++;
                if (currentChunk < chunks) {
                    loadNext();
                } else {
                    const hash = spark.end();
                    callback && callback(hash)
                }
            };
            reader.readAsArrayBuffer(blob);
        }
    };
    loadNext();
}

首先读文件,其次,设置分片大小(2MB),计算切片个数,使用FileReaderArrayBuffer形式读取文件时,可以分多次读取文件的不同部分,并使用append()方法将每个部分追加到SparkMD5的实例中。最后,通过调用end()方法,你可以获取到整个文件的MD5哈希值。然后再进行比较。

3.文件重命名下载

对已经存在的文件,名字是无法修改的,但是可以保存成新的文件然后进行上传:

javascript 复制代码
const name_new = file.name.replace(`${fileName}.`, `${fileName}(1).`);
file.arrayBuffer().then((buffer: any) => {
 let newBlob = new Blob([buffer], { type: file.type });
 let newFile = new File([newBlob], name_new, { type: file.type });
 // 执行上传
});
相关推荐
CAD老兵5 分钟前
前端 Source Map 原理与结构详解
前端
gnip8 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长20 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_20 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101022 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang22 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi23 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课26 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥27 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101027 分钟前
6-1. 实现 useState
前端