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

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

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 });
 // 执行上传
});
相关推荐
Cacciatore->9 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~10 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo12 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末30 分钟前
React——基础
前端·react.js·前端框架
aklry42 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos