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

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

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 });
 // 执行上传
});
相关推荐
山河木马10 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina11 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者17 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享26 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享27 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海31 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子41 分钟前
深入理解TCP协议
前端·javascript·面试
万少42 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
江号软件分享2 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人3 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html