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

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

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 });
 // 执行上传
});
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙11 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript